开篇一张图，后面全靠编
1.配置ReactNative的js环境
在Android项目根目录下输入命令npm init (直接在Android studio的terminal命令窗口就行)
我们可以看到init让你生成一个package.json文件，根据实际情况填写的配置参数（也可以从已有的RN项目中拷贝package.json放大Android
项目根目录下）
当前最新rn是0.56，但是运行时有报错，建议使用0.55.4
如果是命令生成的package.json还需要手动添加启动命令，接下来还需要把启动脚本放进去
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
这样我们就可以时时的调用本地调试服务进行热加载
2.添加ReactNative
接下来我们将React、ReactNative添加到项目中：
npm install --save react react-native
完成后会在Android项目中多出一个node_modules文件夹，里面存放了下载好的React 和React Native和根据package.json生成的一些配置(也可以从已有的RN项目中拷贝，但不建议)
3.安装完成之后，我们再去配置.flowconfig，这个是对js代码做约束的，建议配置（也可以不配置）。
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
4.添加ReactNative依赖到Android项目
在app的build.gradle引入以下依赖
api "com.facebook.react:react-native:+"
在项目根目录build.gradle添加依赖仓库地址
allprojects {
repositories {
…
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
这里maven路径官网上写的是rootDir/../nodemodules/react−native/android，而我们为了方便AS编译，直接放在项目根目录配置RN的，所以这里的路径要改成上面这样
为了防止findbugsbug问题，建议在app/build.gradle中增加下面的代码：
android {
//...
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
}
}
5.添加权限
<uses-permission android:name="android.permission.INTERNET"/>
/**设置调试 的权限**/
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
添加debug模式Activity(正式打包注释掉就好了)
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
6.添加ReactNative界面
首先我们在Android项目根目录添加index.android.js,这个文件作为RN的入口文件。
（也可以是其他名称，需要在实现ReactApplication接口时重写getJSMainModuleName和getBundleAssetName）
7.添加RN Activity界面
（1）.在较老的RN版本中，我们新建一个Activity实现DefaultHardwareBackBtnHandler接口
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")//对应index.android.js
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意这里的HelloWorld必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeDemo", null);
setContentView(mReactRootView);
}
（2）.较新的RN版本，例如RN0.55 我们直接继承ReactActivity即可
public class ReactNativeDemoActivity extends ReactActivity{
private static final String MAIN_COMPONENT = "ReactNativeDemo";
/** * 返回在index.android.js 中注册的组件名
* @return
*/ @Nullable
@Override
protected String getMainComponentName() {
return MAIN_COMPONENT;
}
}
在原生界面上添加一个入口跳转到ReactNativeDemoActivity即可
实现DefaultHardwareBackBtnHandler接口的方式，可以局部添加RN的组件mAndroidLayout.addView(mReactRootView);
8.自定义的Application实现ReactApplication接口
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override protected List getPackages() {
return Arrays.<ReactPackage>asList( new MainReactPackage());
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
9.最后不要忘了在AndroidManifest中添加：
注意需要AppCompat的主题
<activity
android:name=".ReactNativeDemoActivity"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
/>
10.运行项目
1）debug模式，可以不打离线包，实时看到js修改后的效果
先启动服务 npm start
然后直接运行Android项目（注意在RN设置界面绑定电脑的ip端口）
2）release模式
在你打包你的发布版本之前要创建一个bundle文件，这个bundle文件会创建在项目的assets目录中，并且这个文件会包含在你的apk包中，
在你的项目根目录中运行：
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
index.android.js是刚创建的RN界面入口js的名称，后面的输出目录根据自己项目对应修改，例如在项目根目录新建一个bundle目录存放bundle文件，命令就是这样了：
react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false
下一篇讲解 客户端如何更新
网友评论