现有的Android 原生项目里面集成RN 页面的学习和踩坑之路

1 首先创建一个空目录用于存放React Native项目，然后在其中创建一个/android子目录，把你现有的Android项目拷贝到/android子目录中。

2 配置ReactNative的js环境

我们进入项目根目录，接下来我们开始在终端输入：
npm init
一路先去会产生在项目根目录下创建一个名为package.json的空文本文件

3 添加ReactNative到项目

接下来我们将React、ReactNative添加到项目中
npm install –save react react-native

4 安装完成之后，我们再去配置.flowconfig，这个是对js代码做约束的，建议配置（也可以不配置）。

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

5 添加start到package.json文件

这样我们就可以时时的调用本地调试服务进行热加载了

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
####     "start": "node node_modules/react-native/local-cli/cli.js start"
},

6 添加ReactNative到Android项目

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

项目配置Gradle 中

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

**这里rootDir 值得是当前AS项目的工程目录

如果错误的地址，下载不了和JSOn里面的一直的只会去远程Maven 仓库下载最新的，那个也不是最新的哦**

7 为了防止个别机型.so库和findbugsbug问题，建议在app/build.gradle中增加下面的代码：

android {
    defaultConfig {
       ndk {
            //选择要添加的对应cpu类型的.so库。
            abiFilters 'armeabi', "armeabi-v7a","armeabi-v7a","x86"
        }
    }

    //...
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
    }
}
"android.permission.INTERNET"/>
    "android.permission.WRITE_SETTINGS">
    /**设置调试 的权限**/
    "android.permission.SYSTEM_ALERT_WINDOW"/>
    "android.permission.SYSTEM_OVERLAY_WINDOW" />

添加debug模式Activity(正式打包注释掉就好了)

1

添加ReactNative界面

添加index.js
首先我们在项目根目录添加index.js,这个文件作为RN的入口文件。
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class HelloWorld extends React.Component {
  render() {
    return (
      container}>
        Hello, World
      
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
AppRegistry.registerComponent('AndroidRnDemoApp', () => HelloWorld);

注意 AppRegistry.registerComponent(‘AndroidRnDemoApp’, () => HelloWorld);里面的AndroidRnDemoApp,这个作为接下来我们要绑定的activity的入口通道名。

8 集成RN的页面代码

package com.org.gsc.androidinrndemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

/**
 * .::::.
 * .::::::::.
 * :::::::::::  FUCK YOU
 * ..:::::::::::'
 * '::::::::::::'
 * .::::::::::
 * '::::::::::::::..
 * ..::::::::::::.
 * ``::::::::::::::::
 * ::::``:::::::::'        .:::.
 * ::::'   ':::::'       .::::::::.
 * .::::'      ::::     .:::::::'::::.
 * .:::'       :::::  .:::::::::' ':::::.
 * .::'        :::::.:::::::::'      ':::::.
 * .::'         ::::::::::::::'         ``::::.
 * …:::           ::::::::::::'              ``::.
 * ```` ':.          ':::::::::'                  ::::..
 * '.:::::'                    ':'````..
 * * 作者：jiangnanyizhou on 2018/2/3 15:29
 * 邮箱：[email protected]
 */

public class BaseRnActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        //这里的AndroidRnDemoApp必须对应“index.js”中的“AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "AndroidRnDemoApp", null);
        //加载ReactRootView到布局中
        setContentView(mReactRootView);
    }
    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    /**
     * ReactInstanceManager生命周期同activity
     */
    @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);
        }
    }
    @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);
    }
}

最后不要忘了在AndroidManifest中添加

<activity
  android:name=".BaseRnActivity"
  android:theme="@style/Theme.AppCompat.Light.NoActionBar">
activity>

发布打离线包 RN打离线包到Android

由于我们在BaseRnActivity的ReactInstanceManager中setBundleAssetName(“index.android.bundle”)了android离线包，所以在运行之前我们app之前先打个离线包JSBundle到android项目中。

首先在项目app/src/main下面必须要创建一个assets目录，然后我们就开始打离线包啦：

//注意路径
react-native bundle –platform android –dev false –entry-file index.js –bundle-output app/src/main/assets/index.android.bundle –assets-dest app/src/main/res/

控制台这样输出的话 ，表示打包成功

Loading dependency graph, done.
bundle: start
bundle: finish
bundle: Writing bundle output to: app/src/main/assets/index.android.bundle
bundle: Done writing bundle output
运行ReactNative
由于我们是已有项目集成RN,所以我们就不可以使用命令react-native run-android了。没关系我们手动编译呗。
我们可以在AS里面编译，当然也可以用gradle手动编译

1
2
./gradlew build
./gradlew installDebug
运行RN服务

1
2
3
//先开启本地react native服务
adb reverse tcp:8081 tcp:8081
npm start

到此AS集成RN告一段路是不是很懵逼哈哈，

我研究了2天很多坑

最后配上图