我在上一篇入门文章里面已经讲到了如何全新构建一个React Native应用，以及其中涉及到的一些知识点。这篇文章主要聊聊如何在Android原生应用的基础上，集成React Native框架。
React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.
一、创建Android项目
因为React Native for Android只支持Gradle构建，所以在集成前，可以通过Android Studio创建项目，已有项目的可忽略，只强调两点：
- React Native for Android只支持Gradle构建
- Android版本最低支持到4.1（API 16）
二、添加JS到原生应用
进入到项目根目录，执行以下命令：
$ npm init
$ npm install --save react
$ npm install --save react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
第一步执行npm init命令时，根据提示输入相关信息即可生成package.json文件，打开文件，在scripts节点下输入以下信息：
"start": "node node_modules/react-native/local-cli/cli.js start"
继续在根目录下创建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);
三、原生应用添加React Native支持
在app的build.gradle文件里，添加React Native依赖：
compile "com.facebook.react:react-native:+" // From node_modules
在project的build.gradle文件里，添加本地React Native maven仓库的入口：
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from nvm
url "$rootDir/node_modules/react-native/android"
}
}
...
}
在开发模式下，需求去本地的服务器加载Javascript文件，所以需要在AndroidManifest.xml里面添加网络访问权限：
<uses-permission android:name="android.permission.INTERNET" />
在调试模式下，需要加入DevSettingsActivity声明：
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
四、添加原生代码
为了在运行的时候能够打开React Native并且获取到它渲染的界面，我们需要添加一些原生的代码。我们可以创建一个Activity，在内部构造一个ReactRootView，用于开启React应用，并将其作为主要的内容界面。这部分代码可参考官网：
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseOldBridge(true)
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
这个地方需要强调的是，在使用Bridge的时候，需要指明使用OldBridge：
setUseOldBridge(true)
否则，会出现以下错误：
五、运行App
在运行App前，需要先开启本地的服务器，在根目录下执行以下命令：
$ nam start
到这一步，就可以正常的编译运行Android应用了。
