Android原生项目集成React Native踩坑记

最近在学习React Native，将Android原生项目集成React Native实现混合开发。参考官网和其他一些相关资料，自己动手一步一步操作，发现真的是一步步踩坑再填坑的过程，此文章记录集成React Native的步骤和出现的问题，方便以后查阅。
我这里使用的环境是AndroidStudio
react-native为0.48.3
npm为3.10.10

创建Android原生项目

使用AndroidStudio创建Android原生项目ReactNativeLearnApp。

在原生项目中初始化React Native

在项目根目录(ReactNativeLearnApp)下执行下面三条命令，初始化React Native。执行命令可以在Windows命令行下或是AndroidStudio的Terminal下，我这里使用AndroidStudio的Terminal：
1.npm init：生成package.json文件，即RN的配置文件
根据需要进行填写，如下图所示：

此时在 package.json 文件中 scripts 字段下添加
“start”: “node node_modules/react-native/local-cli/cli.js start”配置start命令的路径，如下图所示：

2.npm install –save react react-native：用于安装 React、React Native 相关文件，安装完成后会在项目的根目录下看到 node_modules 文件夹。
如下图所示：

3.curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig：将命令中url指向的.flowconfig文件下载到项目的根目录
对于windows直接直接curl命令提示“不是内部或外部的命令，也不是可运行的程序”，可参考http://9410445.blog.51cto.com/9400445/1763891进行配置。
或是直接将下面网址
https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig里的内容存为.flowconfig文件。

在文件根目录下新建index.android.js文件

index.android.js文件内容如下所示：

'use strict';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('HelloWorld', () => HelloWorld);

我这里只是显示”Hello, World”，可根据需要进行修改。

在Android原生项目中集成React Native程序

1.在App的build.gradle文件下添加facebook react 依赖包：
如下所示：

dependencies {    ...    compile "com.facebook.react:react-native:+"}

sync发现错误”com.google.code.findbugs:jsr305”，错误信息如下所示：

解决方法：
在App的build.gradle中添加如下代码：

android {    ...    configurations.all {        resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'    }}

注意：最新版本中支持的是23，即编译版本改为23，以及appcompat-v7:23.0.1，同时将minSDK改为16，否则会提示错误。
2.在project的build.gradle文件下添加配置
如下所示：

allprojects {    repositories {        jcenter()        maven {            // All of React Native (JS, Android binaries) is installed from npm            url "$rootDir/node_modules/react-native/android"        }    }}

3.添加原生代码：
两种方法：
第一种：写法简单。但是无法局部使用React Native来布局：
只需要自定义一个Activity，并继承ReactActivity，实现getMainComponentName方法，在getMainComponentName方法中返回RN注册的名称即可，名称需要与index.android.js中AppRegister的名称相同。然后创建Application，去初始化ReactNativeHost。自定义Application需要继承ReactApplication。
具体实现：

public class MyReactActivity extends ReactActivity{    @Nullable    @Override    protected String getMainComponentName() {        return "HelloWorld";    }}

public class MyApplication extends Application implements ReactApplication {    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;    }    @Override    public void onCreate() {        super.onCreate();        SoLoader.init(this,false);    }}

第二种：官网给出的方法：
可以利用React Native来写我们界面中的某一块区域，利用原生布局的addView()方法把mReactRootView加入到布局中，下面举例说明：
布局文件为：

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.liuwei.reactnativelearnapp.MainActivity"    android:orientation="vertical">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="测试"/>    <LinearLayout        android:id="@+id/main_layout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">    </LinearLayout></LinearLayout>

MyReactActivity.java：

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {    private LinearLayout mReactLayout;    private ReactRootView mReactRootView;    private ReactInstanceManager mReactInstanceManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {            if (!Settings.canDrawOverlays(this)) {                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,                        Uri.parse("package:" + getPackageName()));                startActivityForResult(intent, 100);            }        }        setContentView(R.layout.react_activity);        mReactLayout = (LinearLayout)this.findViewById(R.id.main_layout);        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) //开发者支持，BuildConfig.DEBUG的值默认是false，无法使用开发者菜单                .setUseDeveloperSupport(true) //开发者支持,开发的时候要设置为true，不然无法使用开发者菜单                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        //这里的ReactNativeView对应index.android.js中AppRegistry.registerComponent('HelloWorld', () => HelloWorld);的HelloWorld        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);        mReactLayout.addView(mReactRootView);    }    @Override    public void invokeDefaultOnBackPressed() {        super.onBackPressed();    }    @Override    protected void onResume() {        super.onResume();        if (mReactInstanceManager != null) {            mReactInstanceManager.onHostResume(this, this);        }    }    @Override    protected void onActivityResult(int requestCode, int resultCode, Intent data) {        if (requestCode == 100) {            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {                if (!Settings.canDrawOverlays(this)) {                    // SYSTEM_ALERT_WINDOW permission not granted...                }            }        }    }    @Override    protected void onPause() {        super.onPause();        if (mReactInstanceManager != null) {            mReactInstanceManager.onHostPause();        }    }    @Override    protected void onDestroy() {        super.onDestroy();        if (mReactInstanceManager != null) {            mReactInstanceManager.onHostDestroy();        }    }    @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);    }}

注意：在清单文件中声明创建的Activity和权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"          package="com.example.liuwei.reactnativelearnapp">    <uses-permission android:name="android.permission.INTERNET" />    <application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:supportsRtl="true"        android:theme="@style/AppTheme">        <activity android:name=".MainActivity">            <intent-filter>                <action android:name="android.intent.action.MAIN"/>                <category android:name="android.intent.category.LAUNCHER"/>            </intent-filter>        </activity>        <activity android:name=".MyReactActivity"/>        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />    </application></manifest>

其中DevSettingsActivity是为了在运行时显示设备选项。

运行项目

1.执行npm start命令：
如下图所示：

2.执行AndroidStudio的run：
第一：出现”java.lang.UnsatisfiedLinkError”错误，如下图所示：

解决方法：
在App下的build.gradle文件中添加NDK支持，如下所示：

defaultConfig {        ...        ndk {        abiFilters "armeabi-v7a", "x86"    }    packagingOptions {        exclude "lib/arm64-v8a/libgnustl_shared.so"    }}

第二：再次run,运行出现错误”Unable to load script from assets index.android.bundle”：

日志显示：

原因：
需要手动创建 React Native bundle 存放到本地 asserts 目录。
解决方法：
先在android/app/src/main/目录下创建assets文件夹；
再运行命令：

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/

其中：
–platform：平台
–dev：开发模式
–entry-file：条目文件
–bundle-output：bundle文件生成的目录
–assets-dest：资源文件生成的目录

命令成功执行后会看到asserts 目录里生成了 index.android.bundle 和 index.android.bundle.meta 两个文件。
第三：运行run,出现“undefined is not an object (evaluating ‘nr.ReactCurrentOwner’)”错误：

日志显示：

解决方法：
在项目根目录下执行
yarn add react@16.0.0-alpha.12
或是
npm i react@16.0.0-alpha.12 –save命令
第四：运行时注意：
先运行以下几条命令
npm start
adb devices
adb reverse tcp:8081 tcp:8081
之后点击run运行项目，泪奔啊，终于成功了！！！

其中测试为原生，Hello,World为react native。。。

总结

以上是我的Android原生项目集成React Native的步骤，遇到的问题和相关解决方案，如有问题，欢迎大家指教！
如有需求，请点击下载Demo。

参考文档：
http://blog.csdn.net/u013718120/article/details/55050900
https://juejin.im/post/5810730aa0bb9f0061d97647
http://cokernut.top/2016/11/25/ReactNative/React%20Native%E5%B5%8C%E5%85%A5Android%E5%8E%9F%E7%94%9F%E9%A1%B9%E7%9B%AE%E4%B8%AD/
https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows
https://stackoverflow.com/questions/44489330/undefined-is-not-an-objectecaluating-reactinternals-reactcurrentowner