【原】React Native嵌入到现有原生应用（一）

本篇主要介绍在开发模式下运行测试程序。

1、创建Android原生应用工程HelloAS

2、在HelloAS工程的根目录中，安装react-native，这时候会创建一个node_modules/

的目录

npm init

注意：init命令需记住name参数，且命名均使用小写字母
init命令，需要填写诸如name、version等参数，输入后按回车接着输入下一个参数。init之后会在根目录生成package.json文件。其中name是react native的工程名（示例工程名为“helloas”），在后面的index.android.js和ReactNativeActivity里都要用到。其它的都可以回车使用默认值。

package.json

3、创建js文件

npm install --save react
npm install --save react-native

注意，因国内网络的问题，我将react-native-0.40.0.tgz下载到工程根目录中。所以在package.json中react-native访问了是本地的file

4、在根目录创建.flowconfig文件

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

在windows环境下，没有curl命令，可以直接用浏览器打开https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig ，将显示的内容直接保存到.flowconfig文件

5、打开package.json文件，在“scripts”内添加如下语句

"start": "node node_modules/react-native/local-cli/cli.js start"

6、在根目录中创建index.android.js，将如下内容粘贴到文件中

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

注意，最后一句AppRegistry.registerComponent，第一个参数是前面package.json里设置的name，第二个参数是自定义的component。

7、在app的build.gradle中添加React Native的编译依赖

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

8、在project的build.gradle中添加本地的React Native的marven目录

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

9、在AndroidManifest中添加如下的权限

/**设置调试 的权限**/

10、在AndroidManifest的Application节点，添加如下Activity

注意，该Activity仅在开发模式从开发服务器reload js时使用，所以在release模式下可精简。
index.android.js就是hello world界面。手机在debug模式下从自己的计算机下载index页面。下载的过程会有个提示的dialog，显示它需要上面的权限。6.0及以上的系统，除了在Manifest里授权，还需要在系统设置里的“应用-》在其他应用的上层显示”里，找到我们的应用，勾选上允许。不同厂家的设置不太一样，华为手机截图如下：

20170111163633851681.png

11、添加原生代码

onCreate部分代码如下，其余参考react native中文网。
注意，mReactRootView.startReactApplication()的第二个参数，必须是package.json里的name

Paste_Image.png

12、在项目的根目录下，运行代码，启动测试服务器

npm start
//或者
react-native start

运行截图如下：

Paste_Image.png

13、进入Android Studio，运行程序

注意，如果要运行在真机上，要注意在设备上运行的相关事项是否已经做过。我的测试机是android 6.0系统，那每次连上usb，都需要先命令行执行一次：

adb reverse tcp:8081 tcp:8081

然后再运行app，否则手机无法连上测试服务器，会出现“红屏”（添加了DevSettingsActivity的情况下）。同样，如果测试服务器没有开启，也会出现错误。

64位真机运行react native的坑

运行时出现如下crash

java.lang.UnsatisfiedLinkError: dlopen failed: "xxx/libgnustl_shared.so" is 32-bit instead of 64-bit

解决方案

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

android.useDeprecatedNdk=true.

2、在project的root目录下的build.gradle中添加如下代码。

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