本篇主要介绍在开发模式下运行测试程序。
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里都要用到。其它的都可以回车使用默认值。
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 (
<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('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中添加如下的权限
<uses-permission android:name="android.permission.INTERNET"/>
/**设置调试 的权限**/
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
10、在AndroidManifest的Application节点，添加如下Activity
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
注意，该Activity仅在开发模式从开发服务器reload js时使用，所以在release模式下可精简。
index.android.js就是hello world界面。手机在debug模式下从自己的计算机下载index页面。下载的过程会有个提示的dialog，显示它需要上面的权限。6.0及以上的系统，除了在Manifest里授权，还需要在系统设置里的“应用-》在其他应用的上层显示”里，找到我们的应用，勾选上允许。不同厂家的设置不太一样，华为手机截图如下：
11、添加原生代码
onCreate部分代码如下，其余参考react native中文网。
注意，mReactRootView.startReactApplication()的第二个参数，必须是package.json里的name
12、在项目的根目录下，运行代码，启动测试服务器
npm start
//或者
react-native start
运行截图如下：
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"
}
}
