Android原生接入React Native

一、新建一个Android Studio项目

二、在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：
   
    字段name,version均可自定义，scripts中是用于启动 packager 服务的命令。

三、使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块
   打开 AS的Terminal终端，输入如下命令：
   
   运行成功后会在项目根目录生成一个”node_modules”文件夹（JavaScript 依赖模块）
   node_modules要记录到.gitignore文件中（即不上传到版本控制系统，只保留在本地）
   这样默认会安装最新版本的 React Native，同时会打印出类似下面的警告信息（你可能需要滚   动屏幕才能注意到）：
   
   这是正常现象，意味着我们还需要安装指定版本的 React，必须严格匹配警告信息中所列出的版   本，高了或者低了都不可以。如果有多处类似警告必须一一安装。比如上图警告信息，安装命令为：

yarn add react@16.2.0

四、配置maven
1、在你的 app 中 build.gradle 文件中添加 React Native 依赖:

implementation "com.facebook.react:react-native:+"

2、在项目的根目录的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须 写在 “allprojects” 代码块中，配置如下图:

3、在app中的build.gradle配置Hermes，不然运行后会报找不到libhermers.so异常，具体配置见下图红线框出部分

五、配置权限
在 AndroidManifest.xml 清单文件中声明网络权限，如果大于6.0，还需要配置悬浮窗权限：

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

如果是真机调试，可添加配置（通过摇晃手机调出Debug菜单）

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

六、在根目录创建一个index.js文件（在 0.49 版本之前是 index.android.js 文件）
在index.js文件中添加显示Hello，world代码

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello,LiYan World</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);

七、创建实现ReactApplication接口的Application

public class MyApplication 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
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this,false);
    }

    @Override
    protected void attachBaseContext(Context base) {
        super.attachBaseContext(base);
    }

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

八、创建一个空白Activity并实现DefaultHardwareBackBtnHandler接口，在Activity中创建一个ReactRootView 对象，作为承载JS的对象

public class SeconActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")        //传入参数为js文件路径+js文件名
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // 注意这里的MyReactNativeApp必须对应“index.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

}

九、启动react服务
1.（此步骤为在Linux系统中碰见的问题，Windows请忽略此步骤）在启动react服务之前，需要更改watchman监听文件数量配置，不然会因为watchman监听数 量不足导致启动服务失败，可通过如下命令永久修改watchman配置（Terminal中执行即可）：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
echo fs.inotify.max_user_instances=524288 | sudo tee -a /etc/sysctl.conf
echo fs.inotify.max_queued_events=524288 | sudo tee -a /etc/sysctl.conf

通过sudo sysctl -p命令查看配置是否成功，然后执行

watchman shutdown-server

2.执行yarn start命令启动服务，如下图所示即为启动成功

3.然后运行AS项目到模拟器或手机查看效果，建议使用模拟器，如果是真机，则必须确保手机和电脑在同一网段内，不然连不上PC上启动的服务