直奔主題赞赖，Here wo go
1.執(zhí)行命令npm init （可以全部按回車過(guò)掉，后面在package.json中修改）
2.執(zhí)行命令npm install --save react react-native
3.在package.json的scripts中加入
"start": "node node_modules/react-native/local-cli/cli.js start"
4.確保package.json中的react, react-native等依賴版本號(hào)和RN端一致蝠嘉。
5.執(zhí)行命令 curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
6.在app中 build.gradle 文件中添加 React Native 依賴:
// 版本號(hào)與package.json中的保持一致
compile "com.facebook.react:react-native:+"
7.在項(xiàng)目的 build.gradle 文件中為 React Native 添加一個(gè) maven 依賴的入口瑰妄，必須寫在 "allprojects" 代碼塊中:
allprojects {
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
8.在 AndroidManifest.xml 清單文件中聲明權(quán)限:
<uses-permission android:name="android.permission.INTERNET”/>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
9.Android不能同時(shí)加載32和64位本機(jī)庫(kù)蕉鸳。 如果至少有一個(gè)依賴庫(kù)使用ARM64支持編譯的擴(kuò)展翅楼，而另外一些依賴庫(kù)僅支持ARM32尉剩，就會(huì)出現(xiàn)問(wèn)題。如果有運(yùn)行時(shí)異常需要在app中build.gradle 中加入:
java.lang.RuntimeException: An error occurred while executing doInBackground()
defaultConfig {
ndk{
abiFilters "armeabi-v7a","x86"
}
packagingOptions {
exclude "lib/arm64-v8a/libimagepipeline.so"
}
}
10.在Android項(xiàng)目中添加入口毅臊，創(chuàng)建一個(gè)Activity：
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
// RN的項(xiàng)目名
return "ReactNativeModule";
}
}
11.項(xiàng)目的application實(shí)現(xiàn)ReactApplication：
public class MainApplication extends Application implements ReactApplication {
private final 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";
}
@Override
protected String getBundleAssetName() {
// 打包bundle后的文件名
return "index.android.jsbundle";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
12.打包RN項(xiàng)目成bundle文件放入Android項(xiàng)目中的assets文件夾理茎，以下是打包命令參數(shù)：
react-native bundle [參數(shù)]
Options:
-h, --help 輸出如何使用的信息
--entry-file <path> RN入口文件的路徑, 絕對(duì)路徑或相對(duì)路徑
--platform [string] ios 或 andorid
--transformer [string] Specify a custom transformer to be used
--dev [boolean] 如果為false, 警告會(huì)不顯示并且打出的包的大小會(huì)變小
--prepack 當(dāng)通過(guò)時(shí), 打包輸出將使用Prepack格式化
--bridge-config [string] 使用Prepack的一個(gè)json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
--bundle-output <string> 打包后的文件輸出目錄, 例: /tmp/groups.bundle
--bundle-encoding [string] 打離線包的格式 可參考鏈接https://nodejs.org/api/buffer.html#buffer_buffer.
--sourcemap-output [string] 生成Source Map，但0.14之后不再自動(dòng)生成source map管嬉，需要手動(dòng)指定這個(gè)參數(shù)功蜓。例: /tmp/groups.map
--assets-dest [string] 打包時(shí)圖片資源的存儲(chǔ)路徑
--verbose 顯示打包過(guò)程
--reset-cache 移除緩存文件
--config [string] 命令行的配置文件路徑
e.g.
react-native bundle --entry-file index.js --bundle-output ./android/bundle/index.android.jsbundle --platform android --assets-dest ./android/bundle/res --dev false
成功后會(huì)生成以下文件：
13.開(kāi)啟服務(wù) npm start，運(yùn)行項(xiàng)目宠蚂。
查看8081端口占用： lsof -i :8081
刪除端口占用： kill 9 PID（PID為上行命令查詢出的id）
