前言

按照React Native的迭代速度，使用官网的文档，已经不能很顺利的实现React Native和Android的有效整合。React Native最新版本 已经是0.39。为了更好的讲解React Native和Android的整合我这里列出我本地的环境：

Android Stuidio 2.2稳定版64位win7操作系统红米note3双网通普配版React Native 0.39

具体实践

创建项目

这一步按照AS新建项目向导一步步完成即可，完成后。

在app module下的build.gradle文件的dependencies中添加React Native 依赖：compile  “com.facebook.react:react-native:+”修改Manifest文件： <uses-permission android:name="android.permission.INTERNET" /> <application ...> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> </application> 1234 1234

注：compile SDK 和target SDK都是24（网上有文章讲，使用的appcompat-v7支持包版本必须是23.0.1，compile SDK和target SDK也必须是23 。不过最新的也支持的）

compile 'com.android.support:appcompat-v7:24.2.1' 1 1

如果你出现下面的错误，可以降低版本到23.

Caused by: java.lang.IllegalAccessError: Method 'void android.support.v4.net.ConnectivityManagerCompat.<init>()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule' (declaration of 'com.facebook.react.modules.netinfo.NetInfoModule' appears in /data/app/com.milter.www.awesomeproject2-2/base.apk) 123456 123456

将Android项目变成React Native项目

其实整合的过程就是将一个原生的Android项目，转换为满足React Native结构格式的项目React Native项目结构。

创建并修改package.json文件  进入Android项目的根目录，使用命令： npm init 1 1

这个命令会引导你在ReactNativeWithNativeApp目录下创建一个package.json文件。如图所示： 

接下来我们对package.json文件进行修改，修改部分如下：

"scripts": { "test": "echo \"Error: no test specified\" && exit 1" } 123 123

修改为：

"scripts": { "test": "echo \"Error: no test specified\" && exit 1" ,"start": "node node_modules/react-native/local-cli/cli.js start" } 1234 1234

修改后，我们在项目根目录的命令行窗口中输入命令：

npm start 1 1

就相当于执行如下命令：

node node_modules/react-native/local-cli/cli.js start 1 1

随着package.json文件的创建，我们的项目也变成了一个Node项目。

引入React Native 模块

在项目根目录下输入如下的命令：

npm install --save react react-native 1 1

执行完后我们发现项目多了一个node_modules文件，react native依赖的库都会在这里看到。

创建.flowconfig文件 curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 1 1

这一命令的作用是将命令中url指向的.flowconfig文件下载到项目的根目录。在上面的图packagejson中可以看到这个下载后的文件。关于curl的讲解请看curl详解  注：如果你不想使用curl命令，你可以可以https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig拷贝里的内容存为.flowconfig文件。

创建RN程序

在根目录下创建index.android.js文件，如果你是直接用react-native init demo（项目名），也可以拷贝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); 1234567891011121314151617181920212223242526272829303132 1234567891011121314151617181920212223242526272829303132

将React Native程序整合进Android项目

在项目根目录的build.gradle中(注意：不是app模块中的build.gradle文件)添加依赖。

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

修改MainActivity内容，完整代码如下：

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; private LifecycleState mLifecycleState = LifecycleState.BEFORE_RESUME; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); /* 下面的版本判断代码官方文档中没有， 如果不添加，在6.0以上的Android版本中会报错 */ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (!Settings.canDrawOverlays(this)) { Intent serviceIntent = new Intent( Settings.ACTION_MANAGE_OVERLAY_PERMISSION); startActivity(serviceIntent); } } mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(mLifecycleState) .build(); //下面代码中的"HelloWorld"来自index.android.js文件中最后一行代码 mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null); setContentView(mReactRootView); } @Override protected void onPause() { super.onPause(); mLifecycleState = LifecycleState.BEFORE_RESUME; if (mReactInstanceManager != null) { mReactInstanceManager.onHostPause(); } } @Override protected void onResume() { super.onResume(); mLifecycleState = LifecycleState.RESUMED; if (mReactInstanceManager != null) { mReactInstanceManager.onHostResume(this, this); } } @Override protected void onDestroy() { super.onDestroy(); mReactRootView.unmountReactApplication(); mReactRootView = null; if (mReactInstanceManager != null) { mReactInstanceManager.destroy(); } } @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { if (mReactInstanceManager != null) { mReactInstanceManager.onActivityResult(this,requestCode, resultCode, data); } } @Override public void onBackPressed() { if (mReactInstanceManager != null) { mReactInstanceManager.onBackPressed(); } else { super.onBackPressed(); } } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } } 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394

运行配置

使用npm start命令运行项目，然后使用

react-native run-android 1 1

如果报错，请往下看。如果出现如下错误：

java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so 1 1

这个错误的原因是React Native提供的libreactnativejni.so文件是32位，而我们的项目中用了一些不兼容的64位so文件，二者混在一起产生的。解决的办法就是禁止使用那些64位的so文件。  第一，在项目根目录下的gradle.properties文件最后加上这样一句：

android.useDeprecatedNdk=true 1 1

第二、在app module下的build.gradle文件中添加如下内容：

android { ... defaultConfig { ... ndk{ abiFilters "armeabi-v7a", "x86" } ... } ... } 1234567891011 1234567891011

第三、找出不兼容的64位so文件并禁止它们  在目录…\ReactNativeWithNativeApp\app\build\outputs\apk下找到app-debug.apk，并把它解压，查看一下，解压后的文件的lib目录下有没有这个目录：  arm64-v8a  如果有这个目录，看看里面的so文件，都是我们要禁止的，禁止的方法如下：假设里面有一个 1.so文件，我们要在app module下的build.gradle文件中做如下修改：

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

好了，整合就说完了，请大家持续关注哦，现在出项目实战了

相关资源：python入门教程(PDF版)