Android现有项目中集成react native

最近集成rn，遇到了不少的坑，在此总结一下。

1.安装必要依赖node

这里建议大家不要安装最新版本的Node.js，如果react native太低的而node太高的话，会出现版本过高问题，然后出现一系列看不懂的错误。

由于我自身的android项目build版本过低,所以安装react native的时候我安装的是0.55.4版本，就是因为版本问题被折磨了三天，唉。如果android版本不冲突的话，就正常安装react native版本就可以。

node版本.png

android项目版本.png

gradle版本.png

安装Node的步骤大家去百度搜就可以了，记得配置环境变量

2.在根目录下执行创建命令

在android studio工程中打开Terminal窗口

npm init

执行之后，输入项目名称，之后一直回车就可以。然后根目录下会出现package.json

npm install –save react react-native

这样默认下载的最新版，安装哪个版本就直接npm install –save react [email protected]。
安装之后会出现下载的版本信息，并且根目录下会出现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中添加权限

/设置调试 的权限/

添加debug模式activity，这个建议一定要设置

这样我们的配置就结束了。

4.添加RN页面

我们先在根目录下添加index.js，这个文件作为RN的入口文件

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class HelloWorld extends React.Component {
  render() {
    return (
      
        Hello, World
      
    );
  }
}
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中添加：

android:name=".BaseRnActivity"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">

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.png

情况2.png

解决方法：

1.在cmd窗口输入ipconfig命令查看本地ip地址

2.我这里用的是真机，摇一摇就会出现调式菜单

3.选择Dev Settings，在选择Debug server host

4.输入本地的ip地址和端口号，端口号默认就是8081。

5.重新运行项目就可以了。运行成功后点击页面会出现我们特别熟悉的Hello world

集成的这几天踩的所有坑，出现的各种看不懂的报错，都是版本问题。太难受了