现有项目接入RN（Android）

直奔主题，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

成功后会生成以下文件：

rn打包bundle生成文件.png

13.开启服务 npm start，运行项目。
查看8081端口占用： lsof -i :8081
删除端口占用： kill 9 PID（PID为上行命令查询出的id）

End