RN的Guide文檔詳細地介紹了整個過程，不過其中有些地方沒說清楚，可能會給初學者埋下深坑。自己走過一遍，把這些坑列出來。這里整篇地援引原文檔，并對原有順序作了調整。
開發環境準備
首先需要搭建開發環境 ，才能進行后面的步驟。
添加JS環境
命令行，cd到app到根文件夾下，然后按順序執行下列命令：
$ npm init
$ npm install --save react
$ npm install --save react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
注意一：init命令記住name參數
init命令，需要填寫諸如name、version等參數，輸入后按回車接著輸入下一個參數。init之后會生出package.json文件。name最為重要，工程名，在后面的index.android.js和MyJReactActivity里都要用到。其它的都可以一路回車使用默認值。
注意二：別忘了引入react
上面npm install --save react，下載react相關的資源包。原文里缺了這步命令，最終導致App跑起來就crash，大概是這樣的：
java.lang.RuntimeException: Error: Requiring unknown module "react" (index.android.bundle:2 )
注意三：添加start，Json格式
打開剛生出的 package.json文件，在“scripts”內添加“start”，注意符合Json格式，逗號別忘了。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
},
注意四：index.android.js里的name
按理說init的時候已經指定了“main”，也就是index.android.js，可是沒有看到自動生成的文件。我們可以手動創建這份文件，名字就按照它給的來吧，作為hello world，我們照抄AwesomeProject的好了。這里特別要注意的是，最后的AppRegistry.registerComponent，第一個參數是前面package.json里設置的name，第二個參數是自定義的component。為什么是這樣，現在還沒去深究。
'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('rntest', () => HelloWorld);
到此為止，Js的環境就配置完成了，后面開始Native部分的配置。
配置Native部分
gradle
app的gradle里添加react-native依賴：
compile "com.facebook.react:react-native:+" // From node_modules
項目的gradle的repositories里添加url：
allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
AndroidManifest.xml
添加權限：
<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" />
添加RN的調試Activity：
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
我們剛開始都是先用debug模式，以自己的開發計算機作為服務器。那份index.android.js就是hello world界面。手機在debug模式下從自己的計算機下載index頁面。下載的過程會有個提示的dialog，顯示它需要上面的權限。6.0及以上的系統，除了在Manifest里授權，還需要在系統設置里的“應用”里的“在其他應用的上層顯示”里，找到我們的應用，勾選上允許。不同廠家的設置不太一樣，我的是這樣的：
如果沒有這些權限和設置，會拋這樣的異常：
android.view.WindowManager$BadTokenException: Unable to add window android.view.ViewRootImpl$W@fc0db15 -- permission denied for this window type
添加RN界面
MyReactActivity完整代碼如下。需要注意的是，
- setUseDeveloperSupport可以直接設為true，在debug期間
- mReactRootView.startReactApplication()的第二個參數，必須是package.json里的name
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
/**
* Created by Byron on 16/9/6.
*/
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
public static void startActivity(Context context){
Intent intent = new Intent(context, MyReactActivity.class);
context.startActivity(intent);
}
@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())
.setUseDeveloperSupport(true)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "rntest", null);
setContentView(mReactRootView);
}
@Override
protected void onResume() {
super.onResume();
if(mReactInstanceManager != null){
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onPause() {
super.onPause();
if(mReactInstanceManager != null){
mReactInstanceManager.onHostPause();
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if(mReactInstanceManager != null){
mReactInstanceManager.onHostDestroy();
}
}
@Override
public void onBackPressed() {
super.onBackPressed();
if(mReactInstanceManager != null){
mReactInstanceManager.onBackPressed();
}else{
super.onBackPressed();
}
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
運行你的應用
還是在項目的根文件夾下，命令行運行如下命令，啟動測試服務器。
$ npm start
或者：
$ react-native start
然后回到Android Studio，跟平常一樣，把App運行起來。如果要運行在真機上，要注意在設備上運行的相關事項是否已經做過。我的測試機是6.0點系統，那每次連上usb，都需要先命令行運行一次：
adb reverse tcp:8081 tcp:8081
然后再運行app，否則手機無法連上測試服務器，會出現“紅屏”（添加了DevSettingsActivity的情況下）。同樣，如果測試服務器沒有開啟，也會出現同樣的錯誤，也就是取不到打好包的js，控制臺的crash log：
java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctly
