在Android原生应用中嵌入React Native

开发工具：Android Studio ， WebStorm

参考链接：React Native官方中文文档

一.创建React Native项目

1.在本地React Native项目目录下，创建一个文件夹，取名为为ReactApp[名字随便取]

2.在ReactApp文件夹下，创建一个名为android文件夹【注：小写】,并将你现有的Android项目拷贝到/android子目录中。

3.在ReactApp文件夹下，创建一个名为package.json的空文本文件，并将以下内容拷入：

    {
            "name": "ReactApp",
            "version": "0.0.1",
            "private": true,
            "scripts": {
            "start": "node node_modules/react-native/local-cli/cli.js start"
            },
            "dependencies": {
                "react": "16.0.0-alpha.12",
                "react-native": "0.46.4"
            }
        }

注：代码中name为你当前RN项目的名称，语法请严格遵守Json语法规范

4.接下来我们使用npm（node包管理器，Node package manager）在项目根目录安装React和React Native模块，打开终端运行：npm install ,RN所需要的模块会被安装到项目根目录下的node_modules/目录中。

二.打开Android Studio 将/android子目录作为Android项目导入到AS中，导入项目无报错，开始以下步骤：

• 配置maven：

  注：如果项目minSdkVersion小于16，请修改为16，RN不支持16版本以下的设备

  1.在你的app中 build.gradle 文件中添加 React Native 依赖:

    dependencies {
        ...
        compile "com.facebook.react:react-native:+" // From node_modules.
    }
  

  2.在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 "allprojects" 代码块中:

    allprojects {
        repositories {
        jcenter()
             maven {
                // All of React Native (JS, Android binaries) is installed from npm
                url "$rootDir/../node_modules/react-native/android"
             }
        }
    }
  

  注：同步Gradle如果报这个错误：

  Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.1) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.

  在你的app中 build.gradle 文件中添加:

    android{
            ...
        configurations.all {
            resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
        }
    }
  

• 配置权限

  1.在 AndroidManifest.xml 清单文件中声明网络权限:

  2.如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:

三.用WebStorm打开创建ReactApp项目：

在项目根目录创建名为index.android.js文件，代码如下：

    import React, {Component} from 'react';
    import {AppRegistry, View, Text, StyleSheet} from 'react-native';
    //import MyLog from './js/MyLog';
    //import MyToast from './js/MyToast';
    
    class ReactApp extends Component {
    
        constructor(props) {
            super(props);
            //MyLog.debug("yxjie", "constructor");
            //MyLog.info('yxjie', 'constructor');
        }
    
        render() {
            //MyLog.debug("yxjie", "render");
            return (
                
                欢迎来到RN界面
                
            );
        }
    }
    
    const styles = StyleSheet.create({
        flex: {
            flex: 1,
            backgroundColor: 'skyblue',
        },
        center: {
            justifyContent: 'center',
            alignItems: 'center',
        },
        text: {
            fontSize: 22,
            fontWeight: 'bold',
            color: 'black',
        }
    });
    
    AppRegistry.registerComponent('ReactApp', () => ReactApp);

四.配置权限以便开发中开启ＲＮ红屏错误能正确显示【Android 入口Activity中配置】

1. 入口Activity的onCreate方法中添加如下代码：

        //检测是否开启悬浮窗权限【RN】
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                Uri.parse("package:" + getPackageName()));
                startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
            }
        }   

2. 加入onActivityResult方法回调：

        @Override
        protected void onActivityResult(int requestCode, int resultCode, Intent data) {
            if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                    if (!Settings.canDrawOverlays(this)) {
                        // SYSTEM_ALERT_WINDOW permission not granted...
                    }
                }
            }
        }       

五.核心内容：【创建展示React Native代码显示界面，并在AndroidManifest.xml申明】

请原谅我的懒惰直接贴代码：

        public class MyReactActivity extends AppCompatActivity 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())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
               // .addPackage(new AnExampleReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

                // 注意这里的MyReactNativeApp必须对应“index.android.js”中的
                // “AppRegistry.registerComponent()”的第一个参数
                mReactRootView.startReactApplication(mReactInstanceManager, "ReactApp", 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();
                }
            }

            @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);
            }
    }

注：以上代码RN官方文档都有解释，再次不废话【有不明白的请移步RN官方文档，或给我留言，谢谢！！！】

五.运行代码【若是真机调试，请用adb命令行修改设备端口为8081】

1.直接用Android Studio run一下你的代码；

2.运行Packager，再React Native项目根目录，打开终端直接运行：npm start 开启RN服务；

Duang_DuangDuang~~ 看到运行结果 是不是很激动，哈哈 ！

下篇文章，会写RN注册并调用Android原生模块的控件方法

React Native调用Android原生方法

以上内容，如有错误，欢迎留言指正！ 谢谢~~~