RN的Guide文檔詳細(xì)地介紹了整個(gè)過(guò)程盟劫，不過(guò)其中有些地方?jīng)]說(shuō)清楚，可能會(huì)給初學(xué)者埋下深坑与纽。
開(kāi)發(fā)環(huán)境準(zhǔn)備
首先需要搭建開(kāi)發(fā)環(huán)境侣签，才能進(jìn)行后面的步驟。
添加JS環(huán)境
命令行渣锦，cd到app到根文件夾下（也可直接在android studio控制臺(tái)的Terminal下執(zhí)行）硝岗，然后按順序執(zhí)行下列命令：
$npm init
$npm install --save react
$npm install --save react-native
$curl -o .flowconfighttps://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
注意一：init命令記住name參數(shù)
init命令，需要填寫(xiě)諸如name袋毙、version等參數(shù)，輸入后按回車(chē)接著輸入下一個(gè)參數(shù)冗尤。init之后會(huì)生出package.json文件听盖。name最為重要胀溺，工程名，在后面的index.android.js和MyJReactActivity里都要用到皆看。其它的都可以一路回車(chē)使用默認(rèn)值仓坞。
注意二：別忘了引入react
上面npm install --save react，下載react相關(guān)的資源包腰吟。原文里缺了這步命令无埃，最終導(dǎo)致App跑起來(lái)就crash，大概是這樣的：
java.lang.RuntimeException: Error: Requiring unknown module "react" (index.android.bundle:2 )
注意三：添加start毛雇，Json格式
打開(kāi)剛生出的 package.json文件嫉称，在“scripts”內(nèi)添加“start”，注意符合Json格式灵疮，逗號(hào)別忘了织阅。
"scripts": {
"test":"echo \"Error:notestspecified\" && exit 1",
"start":"node node_modules/react-native/local-cli/cli.js start"
},
注意四：index.android.js里的name
按理說(shuō)init的時(shí)候已經(jīng)指定了“main”，也就是index.android.js震捣，可是沒(méi)有看到自動(dòng)生成的文件荔棉。我們可以手動(dòng)創(chuàng)建這份文件，名字就按照它給的來(lái)吧蒿赢，作為hello world润樱，我們照抄AwesomeProject的好了。這里特別要注意的是羡棵，最后的AppRegistry.registerComponent祥国，第一個(gè)參數(shù)是前面package.json里設(shè)置的name，第二個(gè)參數(shù)是自定義的component晾腔。為什么是這樣舌稀，現(xiàn)在還沒(méi)去深究，到此為止灼擂，Js的環(huán)境就配置完成了壁查，后面開(kāi)始Native部分的配置。
'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('rnapp', () => HelloWorld);```
####配置Native部分
#####gradle
app的gradle里添加react-native依賴(lài)
compile"com.facebook.react:react-native:+"http:// From node_modules
項(xiàng)目的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"
}
}
}```
添加權(quán)限
AndroidManifest.xml：
<uses-permission android:name="android.permission.INTERNET"/>
/**設(shè)置調(diào)試 的權(quán)限**/
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
####添加RN的調(diào)試Activity：
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
我們剛開(kāi)始都是先用debug模式剔应，以自己的開(kāi)發(fā)計(jì)算機(jī)作為服務(wù)器睡腿。那份index.android.js就是hello world界面。手機(jī)在debug模式下從自己的計(jì)算機(jī)下載index頁(yè)面峻贮。下載的過(guò)程會(huì)有個(gè)提示的dialog席怪，顯示它需要上面的權(quán)限。6.0及以上的系統(tǒng)纤控，除了在Manifest里授權(quán)挂捻，還需要在系統(tǒng)設(shè)置里的“應(yīng)用”里的“在其他應(yīng)用的上層顯示”里，找到我們的應(yīng)用船万，勾選上允許刻撒。不同廠(chǎng)家的設(shè)置不太一樣骨田，我的是這樣的：
如果沒(méi)有這些權(quán)限和設(shè)置，會(huì)拋這樣的異常：
android.view.WindowManager$BadTokenException: Unable to add window android.view.ViewRootImpl$W@fc0db15 -- permission denied for this window type
添加RN界面
MyReactActivity完整代碼如下声怔。需要注意的是态贤，
setUseDeveloperSupport可以直接設(shè)為true，在debug期間
mReactRootView.startReactApplication()的第二個(gè)參數(shù)醋火，必須是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();
}
}
-運(yùn)行你的應(yīng)用
-還是在項(xiàng)目的根文件夾下悠汽，命令行運(yùn)行如下命令，啟動(dòng)測(cè)試服務(wù)器芥驳。
$ npm start
或者：
$ react-native start
npm start成功
回到Android Studio柿冲，跟平常一樣，把App運(yùn)行起來(lái)晚树。如果要運(yùn)行在真機(jī)上姻采，要注意在設(shè)備上運(yùn)行的相關(guān)事項(xiàng)是否已經(jīng)做過(guò)。我的測(cè)試機(jī)是6.0點(diǎn)系統(tǒng)爵憎，那每次連上usb慨亲，都需要先命令行運(yùn)行一次：
真機(jī)測(cè)試 記住一定要執(zhí)行
adb reverse tcp:8081 tcp:8081
然后再運(yùn)行app，否則手機(jī)無(wú)法連上測(cè)試服務(wù)器宝鼓，會(huì)出現(xiàn)“紅屏”（添加了DevSettingsActivity的情況下）刑棵。同樣，如果測(cè)試服務(wù)器沒(méi)有開(kāi)啟愚铡，也會(huì)出現(xiàn)同樣的錯(cuò)誤蛉签，也就是取不到打好包的js，控制臺(tái)的crash log：
java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged corr
========================報(bào)錯(cuò)解決辦法============================
如果出現(xiàn)32 64等.so包的報(bào)錯(cuò)
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```
