前言

昨天下午自己动手将Android的原生app中嵌入ReactNative，集成中遇到各种坑，现在写一下集成步骤和坑的解决方法。

集成步骤

1、创建一个Android Studio的项目(已有项目跳过)， 本文我创建的项目名为RnProject；

2、打开命令行终端，进入RnProject目录，如下：

3：执行相关的终端命令；

1、npm init

终端会出现输入，一步步输入就行了。entry_point即为我们加载Rn的入口JS文件，执行这步命令会生成一个package.json 文件，也可以直接回车，然后打开这个文件，进行编辑，相信怎么编辑就不用我细说了吧，大家网上搜索一个copy一下就ok啦！

注意事项：这个name不能大写哦

2、npm install --save react react-native

该命令是生成react和react-native的包，执行会下载最新的react-native 版本，执行成功的话，会在package.json 文件中会看到下图所示，当然不可能那么一帆风顺滴。。。

执行这个命令会有坑：

报错如下图：

即提示你需要安装react@16.0.0-alpha.6，那解决办法就是安装这个版本的react就是咯，在终端上执行如下命令：

npm i -S react@16.0.0-alpha.6，如下图：

执行完后，我们可以去package.json文件中去查看下是否安装成功，如看到上面的dependencies图则表示成功或者如下图也表示成功，我们可以接着进行下面的步骤啦！

3、在package.json文件中的scripts字段中添加："start": "node node_modules/react-native/local-cli/cli.jsstart"

4、执行命令：curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig，该命令是在项目根目录下生成.flowconfig文件，该命令不是必须的！

5、接着就是编辑我们的Rn文件啦，在项目根目录下新建一个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);

4、Android项目中配置React-Native

1、在你的app中的build.gradle 文件中添加react native的依赖：

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

注意事项：若指定特定的版本，必须和package.json文件中的react-native的版本号一致！

2、在项目的build.gradle文件中添加maven的入口，如下：

allprojects {   
     repositories {       
         ...       
        maven {//AllofReact Native (JS, Android binaries)isinstalledfromnpm
            url"$rootDir/.node_modules/react-native/android"
        }
    } 
   ...
}

坑：同步gradle，添加完后会报一个如下图的错误：

解决方法：在项目的app根目录中build.gradle中的
android{
    ....
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.2'
    }
}

3、修改MainActivity

下面是按照官网的例子来修改，有两种方法，这里就说明一种方法了！

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{
    privateReactRootView mReactRootView;
    privateReactInstanceManager mReactInstanceManager;
    @Override
    protectedvoidonCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        mReactRootView =newReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(newMainReactPackage()) 
               .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED) 
               .build();
     // 注意这里的HelloWorld必须对应“index.android.js”中的“AppRegistry.registerComponent()”的第一个参数一致            mReactRootView.startReactApplication(mReactInstanceManager,"HelloWorld",null);              setContentView(mReactRootView);
}

 @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 invokeDefaultOnBackPressed(){
    super.onBackPressed(); 
   }

@Override public void onBackPressed(){
    if(mReactInstanceManager !=null) {
            mReactInstanceManager.onBackPressed(); 
    }else{
        super.onBackPressed();
    }
    }

@Override public boolean onKeyUp(intkeyCode, KeyEvent event){
    if(keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager !=null) {
         mReactInstanceManager.
         showDevOptionsDialog();
        return true; 
   }
    return super.onKeyUp(keyCode, event);
  }

}

4、配置Android的 AndroidManifest.xml 清单文件的权限:

<user-permission android:name="android.permission.INTERNET"/>

设置react的开发模式，便于测试

<activity android:name="com.facebook.react.devsupport.DevSettingActivity"/>

5、部署完成了，接下来就是执行了！在终端上执行命令：

npm start

执行该命令时报错，如下图：

从报错原因可知，package.json文件出错了，打开文件一看，test前面缺少一个逗号；

修改后再次执行该命令又报错了！坑哇。。。。如下图：

一看报错信息，原来是刚才运行命令的时候 已经暂用了8081这个端口号了，再次运行就报这错了，很久，那我就把占用这个端口号的进程给干掉就是了！先用 lsof  -i ：8081 查看哪些进程占用了端口号，接着用kill -9  进程id 命令杀掉进程，全部杀完后接着 执行npm start
这下ok了，启动成功啦，终于松了一口气！

6、在studio 上run app

毫无疑问不可能一下成功的啦，你懂滴！error了，查看错误日志如下图：

是libgnustl_shared.so文件原因,原来32位和64位的兼容问题，如果直接init的project的话，也不能在64位Android手机上运行，会提示"/data/data/com.hfox.lovesquare/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit  这个错误，既然是兼容问题，那我们就取消掉所以的64位.so文件就行啦，只加载32的就可以了，具体解决如下：

1.在项目的根目录的gradle.properties里面添加一行代码android.useDeprecatedNdk=true.、

2.在app 的build.gradle文件里添加以下代码：

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

接着运行，又报错，oh my god！真想。。。错误日志如下：
Error calling AppResitry.runApplication
Cased by Could not get BatchedBridge, make sure your bundle is packaged correctly

不能运行，原因黄色箭头很明确说明了！bundle不对，解决方法就是

先在src/main目录下新建一个assets目录，如果已存在，则跳过

然后执行命令：

react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output src/main/assets/index.android.bundle –assets-dest src/main/res/

执行完图如下：成功！

在assets目录下会生成两个文件：index.android.bundle,index.android.bundle.meta(可忽略删除)，再run app ！成功啦 ，终于看到hello world了！不容易哇！希望对大家有所帮助。。。