React社區生態圈的加持和Facebook的大力推廣后，react native貌似聲望頗高。近日得閑，于是想學習學習。類似weex基于三端統一，減少開發成本，RN+原生混合開發，這將是一個不錯的選擇。
在這之前找了很多資料，但很多并沒有走通，填填補補的一路走來費了不少時間，所以寫了這篇博客，希望能幫助需要的童鞋。
還沒配置環境的童鞋可以到這里去配置環境：環境搭建
環境配置了就一步一步往下走：
1 在你的app中 build.gradle 文件中添加 React Native 依賴：
compile "com.facebook.react:react-native:+"
2 在你的app中 build.gradle的android的defaultConfig中添加 so庫：
ndk {
abiFilters "armeabi-v7a", "x86"
}
3 在工程目錄下找到工程的 build.gradle文件中，添加 maven依賴：
maven {
// All of React Native (JS, Android binaries) is installed from npm
// url "$rootDir/../node_modules/react-native/android"
// build.gradle文件和node_modules目錄都是在根目錄下面，所以需要把改成下面的形式:
url "$rootDir/node_modules/react-native/android"
}
4 清單文件設置權限：
<uses-permission android:name="android.permission.INTERNET"/>
/設置調試 的權限/
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
清單文件注冊DevSettingsActivity：
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
5 開打Terminal輸入命令:
npm init 生成package.json文件（提示我們輸入一些信息，默認不輸入即可）
6 在package.json的scripts字段中家加入：
"start": "node node_modules/react-native/local-cli/cli.js start",
7 npm install --save reactr eact-native
創建node_modules目錄并把react和react-native下載到了其中
8 然后就是創建index.android.js文件,這里貼出官方的 js代碼:
（注意：下面demo2的入口要跟package.json的name與入口ReactActivity中的getMainComponentName方法返回值一致）
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
我是 原生項目嵌入的 ReactNative
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('demo2', () => AwesomeProject);
9 新版本RN中只需要自定義一個Activity，并繼承ReactActivity，實現getMainComponentName方法，在getMainComponentName方法中
返回RN注冊的名稱即可，名稱需要與index.android.js中AppRegister的名稱相同。通過源碼可以看到，其實在ReactActivity中已經幫助我們實
現了ReactRoow的添加和ReactInstanceManager的默認配置。
public class MyReactActivity extends ReactActivity {
@Nullable
@Override
protected String getMainComponentName() {
return "demo2";
}
}
10 然后創建Application，去初始化ReactNativeHost。自定義Application需要繼承ReactApplication，在源碼loadApp方法中，會將當前Activity的Application強轉為ReactApplication，所以這是必須的步驟。getJSMainModuleName方法返回的是js的入口文件。
public class MainApplication extends Application implements ReactApplication {
private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
)
@Override
protected String getJSMainModuleName() {
return "index.android";
}
};
@Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; }
@Override public void onCreate() {
super.onCreate(); SoLoader.init(this,false);
}
}
11 在你的MainActivity界面中只有一個TextView，點擊跳轉到MyReactActivity ，跳轉報錯。
這時需要在module中新建一個assets目錄，然后通過命令行將react-native的代碼打包到assets目錄中：
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest app/src/main/res/
12 打開Terminal窗口，執行npm start來啟動服務器
13 運行你的app就可以了
