本文学习整理如何将现有的Android项目中集成React Native，以此记录下。
一.使用npm init命令创建package.json文件
在项目根目录下，执行 npm init命令
01.jpg
执行该命令之后，会要求输入一些基本信息：
02.jpg
之后会显示一段json文件：
{
"name": "demo",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"12356"
],
"author": "test",
"license": "ISC"
}
Is this ok? (yes) yes
敲入yes回车，项目根目录会出现一个 package.json文件。
，然后将“start": "node node_modules/react-native/local-cli/cli.js start"添加到scripts节点中：
05.jpg
二. 执行npm install --save react react-native
执行npm install --save react react-native命令，下载 react-native 模块。
如果执行失败，可配置安装yarn包管理工具来下载，该工具是facebook开发的。
04.jpg
下载完成后，在项目的根目录会看到 “node_modules”文件夹。
三..flowconfig文件创建
可打开如下的链接地址，复制里面的内容，建立一个.flowconfig的文件，然后拷贝到项目的根目录。
https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
四. 添加index.android.js文件
添加index.android.js文件，但是react-native版本到0.40以后该文件就改成了index.js。把该文件放入你项目的根目录下.
五.修改项目中的build.gradle文件
1.添加facebook react 依赖包
compile "com.facebook.react:react-native:+" // From node_modules.
2.在android节点下添加配置
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
3.添加NDK的支持
ndk {
abiFilters 'armeabi', 'armeabi-v7a', 'armeabi-v8a', "x86"
}
六.修改项目根目录中的build.gradle文件
1.在allprojects节点下加入maven配置
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
以上都配置完成后，React Native就算集成到了我们现有的项目，接下来需要用Activity来展示RN，所以需要编写如下代码：
新版本RN中只需要自定义一个Activity，并继承ReactActivity，实现getMainComponentName方法，在getMainComponentName方法中返回RN注册的名称即可，名称需要与index.android.js中AppRegister的名称相同。通过源码可以看到，其实在ReactActivity中已经帮助我们实现了ReactRoow的添加和ReactInstanceManager的默认配置。
public class MyReactNative01Activity extends ReactActivity {
@Nullable
@Override
protected String getMainComponentName() {
return "react-example";
}
}
注意： getMainComponentName()方法中返回的react-example名字，必须和index.js文件中入口参数一致:
AppRegistry.registerComponent('react-example', () => HelloWorld);
然后在自定义的Application中需要继承ReactApplication，在源码loadApp方法中，会将当前Activity的Application强转为ReactApplication，所以这是必须的步骤。
public class AppLoader extends Application implements ReactApplication {
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this,false);
}
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
到最后一步了：
在项目中创建assets文件(app/src/main/assets)，并需要手动来生成bundle文件，放入到该文件夹中。
手动生成bundle文件，需要我们执行如下命令：
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/
（1）--platform：平台
（2） --dev：开发模式
（3） --entry-file：条目文件
（4）--bundle-output：bundle文件生成的目录
（5）--assets-dest：资源文件生成的目录
大功告成~~~
运行
1.开启服务，执行：
react-native start
2.运行项目。
注意，如果此时需要摇晃手机弹出配置窗口去配置的话，需要贴加一个activity
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
这样就可以~~~~~
网友评论