開篇一張圖，后面全靠編
1.配置ReactNative的js環(huán)境
在Android項(xiàng)目根目錄下輸入命令npm init (直接在Android studio的terminal命令窗口就行)
? 我們可以看到init讓你生成一個(gè)package.json文件唁毒，根據(jù)實(shí)際情況填寫的配置參數(shù)（也可以從已有的RN項(xiàng)目中拷貝package.json放大Android
? 項(xiàng)目根目錄下）?
當(dāng)前最新rn是0.56蒜茴，但是運(yùn)行時(shí)有報(bào)錯(cuò)，建議使用0.55.4
? 如果是命令生成的package.json還需要手動(dòng)添加啟動(dòng)命令浆西，接下來還需要把啟動(dòng)腳本放進(jìn)去
? ????"scripts": {
? ?????????????"start": "node node_modules/react-native/local-cli/cli.js start",
? ?????????????"test": "jest"
? ? ? ?},
這樣我們就可以時(shí)時(shí)的調(diào)用本地調(diào)試服務(wù)進(jìn)行熱加載
2.添加ReactNative
接下來我們將React粉私、ReactNative添加到項(xiàng)目中：
npm install --save react react-native
完成后會(huì)在Android項(xiàng)目中多出一個(gè)node_modules文件夾，里面存放了下載好的React 和React Native和根據(jù)package.json生成的一些配置(也可以從已有的RN項(xiàng)目中拷貝近零，但不建議)
3.安裝完成之后诺核，我們?cè)偃ヅ渲?flowconfig，這個(gè)是對(duì)js代碼做約束的秒赤，建議配置（也可以不配置）猪瞬。
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
4.添加ReactNative依賴到Android項(xiàng)目
在app的build.gradle引入以下依賴
api "com.facebook.react:react-native:+"
在項(xiàng)目根目錄build.gradle添加依賴倉(cāng)庫地址
allprojects {
?repositories {? ? ? ?
?? ?…? ?
?? ? ? ? maven {?
? ? ????????????????? // All of React Native (JS, Android binaries) is installed from npm?
? ? ? ? ?????????????url "$rootDir/node_modules/react-native/android"? ? ?
????????? ?}?
? ? }?
}
這里maven路徑官網(wǎng)上寫的是rootDir/../nodemodules/react?native/android，而我們?yōu)榱朔奖鉇S編譯入篮，直接放在項(xiàng)目根目錄配置RN的陈瘦，所以這里的路徑要改成上面這樣
為了防止findbugsbug問題，建議在app/build.gradle中增加下面的代碼：
android {
? ? //...
? ? configurations.all {
? ? ? ? resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
? ? }
}
5.添加權(quán)限
<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" />
添加debug模式Activity(正式打包注釋掉就好了)
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
6.添加ReactNative界面
首先我們?cè)贏ndroid項(xiàng)目根目錄添加index.android.js,這個(gè)文件作為RN的入口文件潮售。
（也可以是其他名稱痊项，需要在實(shí)現(xiàn)ReactApplication接口時(shí)重寫getJSMainModuleName和getBundleAssetName）
7.添加RN Activity界面
（1）.在較老的RN版本中，我們新建一個(gè)Activity實(shí)現(xiàn)DefaultHardwareBackBtnHandler接口
@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")//對(duì)應(yīng)index.android.js
? ? ? ? ? ? ? ? .addPackage(new MainReactPackage())
? ? ? ? ? ? ? ? .setUseDeveloperSupport(BuildConfig.DEBUG)
? ? ? ? ? ? ? ? .setInitialLifecycleState(LifecycleState.RESUMED)
? ? ? ? ? ? ? ? .build();
? ? ? ? // 注意這里的HelloWorld必須對(duì)應(yīng)“index.android.js”中的
? ? ? ? // “AppRegistry.registerComponent()”的第一個(gè)參數(shù)
? ? ? ? mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeDemo", null);
? ? ? ? setContentView(mReactRootView);
? ? }
（2）.較新的RN版本酥诽，例如RN0.55 我們直接繼承ReactActivity即可
public class ReactNativeDemoActivity extends ReactActivity{
private static final String MAIN_COMPONENT = "ReactNativeDemo";
/** * 返回在index.android.js 中注冊(cè)的組件名
* @return
*/ @Nullable
@Override
protected String getMainComponentName() {
????????return MAIN_COMPONENT;
????}
}
在原生界面上添加一個(gè)入口跳轉(zhuǎn)到ReactNativeDemoActivity即可
? 實(shí)現(xiàn)DefaultHardwareBackBtnHandler接口的方式鞍泉，可以局部添加RN的組件mAndroidLayout.addView(mReactRootView);
8.自定義的Application實(shí)現(xiàn)ReactApplication接口
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
????????????????@Override
????????????????protected boolean getUseDeveloperSupport() {
????????????????????????????return BuildConfig.DEBUG;
????????????????}
????????@Override protected List getPackages() {
????????????????return Arrays.<ReactPackage>asList( new MainReactPackage());
????????}
};
????@Override
????public ReactNativeHost getReactNativeHost() {
????????????return mReactNativeHost;
????????}
}
9.最后不要忘了在AndroidManifest中添加：
注意需要AppCompat的主題
<activity
? android:name=".ReactNativeDemoActivity"
? android:theme="@style/Theme.AppCompat.Light.NoActionBar"
/>
10.運(yùn)行項(xiàng)目
1）debug模式，可以不打離線包肮帐，實(shí)時(shí)看到j(luò)s修改后的效果
? ? 先啟動(dòng)服務(wù) npm start
? ? 然后直接運(yùn)行Android項(xiàng)目（注意在RN設(shè)置界面綁定電腦的ip端口）
2）release模式
? ? 在你打包你的發(fā)布版本之前要?jiǎng)?chuàng)建一個(gè)bundle文件咖驮，這個(gè)bundle文件會(huì)創(chuàng)建在項(xiàng)目的assets目錄中，并且這個(gè)文件會(huì)包含在你的apk包中训枢，
? ? 在你的項(xiàng)目根目錄中運(yùn)行：
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
index.android.js是剛創(chuàng)建的RN界面入口js的名稱托修，后面的輸出目錄根據(jù)自己項(xiàng)目對(duì)應(yīng)修改，例如在項(xiàng)目根目錄新建一個(gè)bundle目錄存放bundle文件恒界，命令就是這樣了：
react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false
下一篇講解?客戶端如何更新
