[置顶] 现有的Android 原生项目里面集成RN 页面的学习和踩坑之路
2018-02-03 17:40
716 查看
1 首先创建一个空目录用于存放React Native项目,然后在其中创建一个/android子目录,把你现有的Android项目拷贝到/android子目录中。
2 配置ReactNative的js环境
我们进入项目根目录,接下来我们开始在终端输入:npm init
一路先去会产生在项目根目录下创建一个名为package.json的空文本文件
3 添加ReactNative到项目
接下来我们将React、ReactNative添加到项目中npm install –save react react-native
4 安装完成之后,我们再去配置.flowconfig,这个是对js代码做约束的,建议配置(也可以不配置)。
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig5 添加start到package.json文件
这样我们就可以时时的调用本地调试服务进行热加载了"scripts": { "test": "echo \"Error: no test specified\" && exit 1", #### "start": "node node_modules/react-native/local-cli/cli.js start" },
6 添加ReactNative到Android项目
compile "com.facebook.react:react-native:+"
项目配置Gradle 中
maven { // All of React Native (JS, Android binaries) is installed from npm maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/../../node_modules/react-native/android" } }
**这里rootDir 值得是当前AS项目的工程目录
如果错误的地址,下载不了和JSOn里面的一直的只会去远程Maven 仓库下载最新的,那个也不是最新的哦**
7 为了防止个别机型.so库和findbugsbug问题,建议在app/build.gradle中增加下面的代码:
android { defaultConfig { ndk { //选择要添加的对应cpu类型的.so库。 abiFilters 'armeabi', "armeabi-v7a","armeabi-v7a","x86" } } //... configurations.all { resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0' } } <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.WRITE_SETTINGS"></uses-permission> /**设置调试 的权限**/ <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
添加debug模式Activity(正式打包注释掉就好了)
1
添加ReactNative界面
添加index.js 首先我们在项目根目录添加index.js,这个文件作为RN的入口文件。 import React from 'react'; import {AppRegistry, StyleSheet, Text, View} from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>Hello, World</Text> </View> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent('AndroidRnDemoApp', () => HelloWorld);
注意 AppRegistry.registerComponent(‘AndroidRnDemoApp’, () => HelloWorld);里面的AndroidRnDemoApp,这个作为接下来我们要绑定的activity的入口通道名。
8 集成RN的页面代码
package com.org.gsc.androidinrndemo; import android.app.Activity; import android.os.Bundle; import android.view.KeyEvent; import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactRootView; import com.facebook.react.common.LifecycleState; import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler; import com.facebook.react.shell.MainReactPackage; /** * .::::. * .::::::::. * ::::::::::: FUCK YOU * ..:::::::::::' * '::::::::::::' * .:::::::::: * '::::::::::::::.. * ..::::::::::::. * ``:::::::::::::::: * ::::``:::::::::' .:::. * ::::' ':::::' .::::::::. * .::::' :::: .:::::::'::::. * .:::' ::::: .:::::::::' ':::::. * .::' :::::.:::::::::' ':::::. * .::' ::::::::::::::' ``::::. * …::: ::::::::::::' ``::. * ```` ':. ':::::::::' ::::.. * '.:::::' ':'````.. * * 作者:jiangnanyizhou on 2018/2/3 15:29 * 邮箱:373654981@qq.com */ public class BaseRnActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); //这里的AndroidRnDemoApp必须对应“index.js”中的“AppRegistry.registerComponent()”的第一个参数 mReactRootView.startReactApplication(mReactInstanceManager, "AndroidRnDemoApp", null); //加载ReactRootView到布局中 setContentView(mReactRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } /** * ReactInstanceManager生命周期同activity */ @Override protected void onPause() { super.onPause(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostPause(this); } } @Override protected void onResume() { super.onResume(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostResume(this, this); } } @Override protected void onDestroy() { super.onDestroy(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostDestroy(this); } } @Override public void onBackPressed() { if (mReactInstanceManager != null) { mReactInstanceManager.onBackPressed(); } else { super.onBackPressed(); } } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { mReactInstanceManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode, event); } }
最后不要忘了在AndroidManifest中添加
<activity android:name=".BaseRnActivity" android:theme="@style/Theme.AppCompat.Light.NoActionBar"> </activity>
发布打离线包 RN打离线包到Android
由于我们在BaseRnActivity的ReactInstanceManager中setBundleAssetName(“index.android.bundle”)了android离线包,所以在运行之前我们app之前先打个离线包JSBundle到android项目中。首先在项目app/src/main下面必须要创建一个assets目录,然后我们就开始打离线包啦:
//注意路径
react-native bundle –platform android –dev false –entry-file index.js –bundle-output app/src/main/assets/index.android.bundle –assets-dest app/src/main/res/
控制台这样输出的话 ,表示打包成功
Loading dependency graph, done.bundle: start
bundle: finish
bundle: Writing bundle output to: app/src/main/assets/index.android.bundle
bundle: Done writing bundle output
运行ReactNative
由于我们是已有项目集成RN,所以我们就不可以使用命令react-native run-android了。没关系我们手动编译呗。
我们可以在AS里面编译,当然也可以用gradle手动编译
1
2
./gradlew build
./gradlew installDebug
运行RN服务
1
2
3
//先开启本地react native服务
adb reverse tcp:8081 tcp:8081
npm start
到此AS集成RN告一段路是不是很懵逼哈哈,
我研究了2天很多坑
最后配上图
相关文章推荐
- [置顶] 现有的Android 原生项目里面集成RN 页面的学习和踩坑之路方法2
- RN学习之路之-RN调用Android 原生页面篇(片尾附上源码地址)
- 在现有原生开发Android项目中集成hbuilder开发
- 原生Android项目中集成React native页面
- Android的学习之路(二)项目中原生文件的使用场景和文件介绍
- [置顶] Android原生项目集成React Native
- React Native学习笔记之--向原生应用中集成RN页面
- ReactNative学习——集成到原生android项目中
- Android开发学习之路--Android Studio项目目录结构简介
- 轻松学习Ionic (二) 为Android项目集成Crosswalk(更新官方命令行工具)
- 在Windows上将ReactNative集成到现有的Android项目
- IOS与React Native混编,将RN框架使用CocoaPods集成到原生项目中
- [置顶] FFmpeg学习—Android 使用ffmpeg 集成x264和fdk-aac 库
- [置顶] 菜鸡学习之路之------MPAndroidChart 一个开源图表库
- Android开发学习之路--Android Studio项目目录结构简介
- Android原生项目集成React Native
- 集成 React Native 到现有的 Android 项目( Mac, Windows 通用版 )
- React Native 集成到 Android 原生项目中踩坑记录 (Didn't find class "com.facebook.jni.IteratorHelper")
- Android studio 项目 目录结构简介 -- Android 学习之路
- Android开发学习之路--Android Studio项目目录结构简介