RN的Guide文檔詳細地介紹了整個過程，不過其中有些地方沒說清楚，可能會給初學者埋下深坑。
開發環境準備
首先需要搭建開發環境，才能進行后面的步驟。
添加JS環境
命令行，cd到app到根文件夾下（也可直接在android studio控制臺的Terminal下執行），然后按順序執行下列命令：
$npminit$npminstall --save react$npminstall --save react-native$curl-o .flowconfighttps://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
注意一：init命令記住name參數
init命令，需要填寫諸如name、version等參數，輸入后按回車接著輸入下一個參數。init之后會生出package.json文件。name最為重要，工程名，在后面的index.android.js和MyJReactActivity里都要用到。其它的都可以一路回車使用默認值。
package.json
注意二：別忘了引入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:notestspecified\" && 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。為什么是這樣，現在還沒去深究，到此為止，Js的環境就配置完成了，后面開始Native部分的配置。
'use strict'importReactfrom'react';import{? AppRegistry,? StyleSheet,? Text,? View}from'react-native';classHelloWorldextendsReact.Component{? render() {return(Hello world!);? }}varstyles = StyleSheet.create({container: {flex:1,justifyContent:'center',? },hello: {fontSize:20,textAlign:'center',margin:10,? },});AppRegistry.registerComponent('rnapp', () => HelloWorld);
配置Native部分
gradle
app的gradle里添加react-native依賴
compile"com.facebook.react:react-native:+"http:// From node_modules
項目的gradle的repositories里添加url：
allprojects {? ? ? ? repositories {? ? ? ? jcenter()? ? ? ? ? ? ? ? ? ? maven {//AllofReact Native (JS, Android binaries)isinstalledfromnpmurl"$rootDir/node_modules/react-native/android"}? ? ? ? }}
添加權限
AndroidManifest.xml：
/**設置調試 的權限**/####添加RN的調試Activity：
我們剛開始都是先用debug模式，以自己的開發計算機作為服務器。那份index.android.js就是hello world界面。手機在debug模式下從自己的計算機下載index頁面。下載的過程會有個提示的dialog，顯示它需要上面的權限。6.0及以上的系統，除了在Manifest里授權，還需要在系統設置里的“應用”里的“在其他應用的上層顯示”里，找到我們的應用，勾選上允許。不同廠家的設置不太一樣，我的是這樣的：
設置.png
如果沒有這些權限和設置，會拋這樣的異常：
android.view.WindowManager$BadTokenException: Unable to add window android.view.ViewRootImpl$W@fc0db15 -- permission deniedforthis window type
添加RN界面
MyReactActivity完整代碼如下。需要注意的是，
setUseDeveloperSupport可以直接設為true，在debug期間
mReactRootView.startReactApplication()的第二個參數，必須是package.json里的name
importandroid.app.Activity;importandroid.content.Context;importandroid.content.Intent;importandroid.os.Bundle;importcom.facebook.react.LifecycleState;importcom.facebook.react.ReactInstanceManager;importcom.facebook.react.ReactRootView;importcom.facebook.react.modules.core.DefaultHardwareBackBtnHandler;importcom.facebook.react.shell.MainReactPackage;/**
* Created by Byron on 16/9/6.
*/publicclassMyReactActivityextendsActivityimplementsDefaultHardwareBackBtnHandler{privateReactRootView mReactRootView;privateReactInstanceManager mReactInstanceManager;publicstaticvoidstartActivity(Context context){? ? ? ? Intent intent =newIntent(context, MyReactActivity.class);? ? ? ? context.startActivity(intent);? ? }@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);? ? ? ? mReactRootView =newReactRootView(this);? ? ? ? mReactInstanceManager = ReactInstanceManager.builder()? ? ? ? ? ? ? ? .setApplication(getApplication())? ? ? ? ? ? ? ? .setBundleAssetName("index.android.bundle")? ? ? ? ? ? ? ? .setJSMainModuleName("index.android")? ? ? ? ? ? ? ? .addPackage(newMainReactPackage())? ? ? ? ? ? ? ? .setUseDeveloperSupport(true)? ? ? ? ? ? ? ? .setInitialLifecycleState(LifecycleState.RESUMED)? ? ? ? ? ? ? ? .build();? ? ? ? mReactRootView.startReactApplication(mReactInstanceManager,"rntest",null);? ? ? ? setContentView(mReactRootView);? ? }@OverrideprotectedvoidonResume(){super.onResume();if(mReactInstanceManager !=null){? ? ? ? ? ? mReactInstanceManager.onHostResume(this,this);? ? ? ? }? ? }@OverrideprotectedvoidonPause(){super.onPause();if(mReactInstanceManager !=null){? ? ? ? ? ? mReactInstanceManager.onHostPause();? ? ? ? }? ? }@OverrideprotectedvoidonDestroy(){super.onDestroy();if(mReactInstanceManager !=null){? ? ? ? ? ? mReactInstanceManager.onHostDestroy();? ? ? ? }? ? }@OverridepublicvoidonBackPressed(){super.onBackPressed();if(mReactInstanceManager !=null){? ? ? ? ? ? mReactInstanceManager.onBackPressed();? ? ? ? }else{super.onBackPressed();? ? ? ? }? ? }@OverridepublicvoidinvokeDefaultOnBackPressed(){super.onBackPressed();? ? }}
-運行你的應用
-還是在項目的根文件夾下，命令行運行如下命令，啟動測試服務器。
$npmstart
或者：
$ react-nativestart
npm start成功
回到Android Studio，跟平常一樣，把App運行起來。如果要運行在真機上，要注意在設備上運行的相關事項是否已經做過。我的測試機是6.0點系統，那每次連上usb，都需要先命令行運行一次：
真機測試 記住一定要執行
adbreversetcp:8081tcp:8081
然后再運行app，否則手機無法連上測試服務器，會出現“紅屏”（添加了DevSettingsActivity的情況下）。同樣，如果測試服務器沒有開啟，也會出現同樣的錯誤，也就是取不到打好包的js，控制臺的crash log：
java.lang.RuntimeException: CouldnotgetBatchedBridge, make sure your bundleispackaged corr
========================報錯解決辦法============================
如果出現32 64等.so包的報錯
1.在build.gradle加入
android{? ...defaultConfig{? ? ? ? ? ? ...ndk{? ? ? ? ? ? abiFilters"armeabi","armeabi-v7a","x86","mips"}packagingOptions{? ? ? ? ? ? exclude"lib/arm64-v8a/librealm-jni.so"}? ? }
2.在gradle.properties尾部加入
Android.useDeprecatedNdk=true
