直奔主题，Here wo go
1.执行命令npm init （可以全部按回车过掉，后面在package.json中修改）
2.执行命令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等依赖版本号和RN端一致。
5.执行命令 curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
6.在app中 build.gradle 文件中添加 React Native 依赖:
// 版本号与package.json中的保持一致
compile "com.facebook.react:react-native:+"
7.在项目的 build.gradle 文件中为 React Native 添加一个 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 清单文件中声明权限:
<uses-permission android:name="android.permission.INTERNET”/>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
9.Android不能同时加载32和64位本机库。 如果至少有一个依赖库使用ARM64支持编译的扩展，而另外一些依赖库仅支持ARM32，就会出现问题。如果有运行时异常需要在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项目中添加入口，创建一个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的项目名
return "ReactNativeModule";
}
}
11.项目的application实现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项目成bundle文件放入Android项目中的assets文件夹，以下是打包命令参数：
react-native bundle [参数]
Options:
-h, --help 输出如何使用的信息
--entry-file <path> RN入口文件的路径, 绝对路径或相对路径
--platform [string] ios 或 andorid
--transformer [string] Specify a custom transformer to be used
--dev [boolean] 如果为false, 警告会不显示并且打出的包的大小会变小
--prepack 当通过时, 打包输出将使用Prepack格式化
--bridge-config [string] 使用Prepack的一个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之后不再自动生成source map，需要手动指定这个参数。例: /tmp/groups.map
--assets-dest [string] 打包时图片资源的存储路径
--verbose 显示打包过程
--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
成功后会生成以下文件：
13.开启服务 npm start，运行项目。
查看8081端口占用： lsof -i :8081
删除端口占用： kill 9 PID（PID为上行命令查询出的id）
