最近集成rn，遇到了不少的坑，在此总结一下。
1.安装必要依赖node
这里建议大家不要安装最新版本的Node.js，如果react native太低的而node太高的话，会出现版本过高问题，然后出现一系列看不懂的错误。
由于我自身的android项目build版本过低,所以安装react native的时候我安装的是0.55.4版本，就是因为版本问题被折磨了三天，唉。如果android版本不冲突的话，就正常安装react native版本就可以。
安装Node的步骤大家去百度搜就可以了，记得配置环境变量
2.在根目录下执行创建命令
在android studio工程中打开Terminal窗口
npm init
执行之后，输入项目名称，之后一直回车就可以。然后根目录下会出现package.json
npm install –save react react-native
这样默认下载的最新版，安装哪个版本就直接npm install –save react react-native@0.xx.x。
安装之后会出现下载的版本信息，并且根目录下会出现node_modules文件夹
如果没有react的话，就根据rn的版本安装对应的。安装命令都是npm install 插件名 --save
RN <= 0.57.2 --> react <= 16.5.1
RN >= 0.57.3 --> react >= 16.6
3.Android项目ReactiNative配置及项目依赖
首先打开我们根目录下的package.json，添加如下命令
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "echo "Error: no test specified" && exit 1"
}
接下来打来根目录下的build.gradle，在allprojects中的repositories添加
maven{ url "$rootDir/node_modules/react-native/android" }
这里的rootDir是android项目根目录的路径
然后在打开app中的build.gradle，添加依赖。你安装的rn是什么版本，这里就是同样的
compile "com.facebook.react:react-native:0.55.4"
AndroidManifest.xml中添加权限
<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"/>
这样我们的配置就结束了。
4.添加RN页面
我们先在根目录下添加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);
之后新建一个class作为RN页面,这里的写法是旧版本rn的写法
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;
import spb.m.BuildConfig;
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>
5.添加index.android.bundle文件
在Terminal窗口执行，这里的Index.js是你自己的入口文件
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
执行成功后，在assets文件夹中会出现两个文件
6.运行项目
npm start
这里启动服务成功后，会显示done。
每次运行完服务可能会出现错误，大家可以在这个网址，看服务是否运行成功。因为我之前因为版本的问题一直运行都没有，所以最后就在网址测试通过后，在看手机
http://localhost:8081/index.delta?platform=android&dev=true&minify=false
服务启动成功后，刚才的网站会出现js代码就证明服务启动成功了。
然后正常运行android项目就可以了。
运行成功之后，跳转到刚才编写的RN页面，正常情况下运行可能会出现下面情况
解决方法：
1.在cmd窗口输入ipconfig命令查看本地ip地址
2.我这里用的是真机，摇一摇就会出现调式菜单
3.选择Dev Settings，在选择Debug server host
4.输入本地的ip地址和端口号，端口号默认就是8081。
5.重新运行项目就可以了。运行成功后点击页面会出现我们特别熟悉的Hello world
集成的这几天踩的所有坑，出现的各种看不懂的报错，都是版本问题。太难受了
