android 原生app嵌入reactnative页面

话说原生Android app嵌入reactnative页面的网上资料也不少了，而且也不错，但是自己照着做的时候还是问题多多，难道真的是坑太多吗？摸索着最终还是实现了，唉，眼泪哗哗的，先记录一下吧。

第一步让我晕的就是目录结构，看了官方文档一直说项目根目录，结果百度了一下根目录，一哥们说是src的上级目录就是app所在的目录，感觉也是，结果就做下去了，结果就悲催了，折腾了一下午也没搞定，然后看了江清清的文章，这把知道目录了，要在项目的同级目录里面，也就是app的上级目录，src的上上级目录做。这把做下去历经不知道多少劫难，成功啦，开心！但是。。。为毛项目名称一定要是Android啊，这不坑吗，难道我以后的项目名字都有叫这个啊，这显然不行，结果我新建了一个项目，名字随便起的叫ReactNativeOne，结果就报错了：Android project not found. Maybe run react-native android first?，这时候看了网上一哥们的解答，试了一下，确实可以，就是先用android stdio先运行app，首先我们的app是一个原生的，as启动自然没问题。点击绿色小三角运行app启动了，然后运行命令react-native start或者npm start，就可以了，然后跳转RN页面，设置ip和端口，重新加载一下就ok了。下面是demo的主要实现不步骤，和网上有很多雷同，就不一一给出链接了。

1、E:盘下新建目录ReactNativeProject目录，as新建工程ReactNativeOne，一个原生android就出来了，目录如下：

然后cmd进入到ReactNativeProject目录下面，执行npm init命令，提示输入name的时候就输入reactnativeproject，要小写。其他的一路enter键下去就好了。然后再执行命令npm install --save react react-native，等待一会执行成功，目录结构如下：

npm install --save react react-native运行完我这提示react-native@0.44.0 requires a peer of react@16.0.0-alpha.6 but none was installed，打开package.json看看，里面react版本不是16这个，这时候是react-native和react版本不一致问题，一定要解决，否则packager服务起不来，解决办法是输入命令npm i -S react@16.0.0-alpha.6。再看看package里面react版本就变了。接下来修改package.json文件，package.json里面scripts替换"start": "node node_modules/react-native/local-cli/cli.js start"。然后上图目录里面加入index.android.js文件,代码如下：

import React, { Component } from 'react';import { AppRegistry,StyleSheet, Text, View } from 'react-native';class Blink extends Component {  constructor(props) {    super(props);    this.state = { showText: true };    // 每50毫秒对showText状态做一次取反操作    setInterval(() => {      this.setState({ showText: !this.state.showText });    }, 50);  }  render() {    // 根据当前showText的值决定是否显示text内容    let display = this.state.showText ? this.props.text : ' ';    return (      <Text style={styles.bigblue,styles.red}>{display}</Text>    );  }}class BlinkApp extends Component {  render() {    return (      <View>        <Blink text='I love to blink' />        <Blink text='Yes blinking is so great' />        <Blink text='Why did they ever take this out of HTML' />        <Blink text='Look at me look at me look at me' />      </View>    );  }}const styles = StyleSheet.create({  bigblue: {    color: 'blue',    fontWeight: 'bold',    fontSize: 30,  },  red: {    color: 'red',  },});AppRegistry.registerComponent('ReactNativeProject', () => BlinkApp);

目录如下：

接下来修改as工程，打开MainActivity页面，加入一个按钮，然后新建一个ReactNativeActivity页面，按钮跳转到该页面。然后再建立工程，app里面的build.gradle里面导入compile "com.facebook.react:react-native:+" ，这个要在npm install --save react react-native命令后执行，如果顺序反了就在as里面无法正确导入react-native包，可能导入的是老版本的而不是你本地安装的，这个地方要注意一下，否则as就报错了。

gradle里面最低sdk版本要改为至少16，即minSdkVersion16，否则报错。

然后还是在app里面的build.gradle里面的build.gradle里面android{}加入如下代码：

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

我这最终代码如下：

android {    compileSdkVersion 25    buildToolsVersion "25.0.2"    defaultConfig {        applicationId "com.example.user.reactnativeone"        minSdkVersion 16        targetSdkVersion 25        versionCode 1        versionName "1.0"        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"    }    buildTypes {        release {            minifyEnabled false            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'        }    }    configurations.all {        resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'    }}

不然会报如下错误：
Conflict with dependency 'com.google.code.findbugs:jsr305'. 
Resolved versions for app (3.0.0) and test app (2.0.1) differ. 
See http://g.co/androidstudio/app-test-app-conflict for details.

接下来AndroidManifest里面加入权限：

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

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

和DevSettingsActivity声明，不然到时候点击Dev Setting就崩啦

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

最后就是修改DevSettingsActivity里面的代码了：

public class ReactNativeActivity extends Activity implements DefaultHardwareBackBtnHandler {    private ReactRootView mReactRootView;    private ReactInstanceManager mReactInstanceManager;    public static int OVERLAY_PERMISSION_REQ_CODE = 1234;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mReactRootView = new ReactRootView(this);        mReactInstanceManager = ReactInstanceManager.builder()                .setApplication(getApplication())                .setBundleAssetName("index.android.bundle")                .setJSMainModuleName("index.android")                .addPackage(new MainReactPackage())                .setUseDeveloperSupport(BuildConfig.DEBUG)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeProject", null);        setContentView(mReactRootView);        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);            }        }    }    @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...                }            }        }    }    @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    public void onBackPressed() {        if (mReactInstanceManager != null) {            mReactInstanceManager.onBackPressed();        } else {            super.onBackPressed();        }    }}

好了，这下基本上工作完事，准备跑起来吧。

但是...记得开篇说的注意事项了吗，先跑as，模拟器运行处app后，然后在命令行下执行react-native start或者npm start命令。

模拟器跑出来app后进入android原生页面

点击按钮进入react-native页面，ctrl+M调出菜单，点击Dev Setting设置ip和端口

最后as重新运行app就好了，这之前可能要重新运行nmp start命令，最终RN页面如下，是一个带有闪啊闪啊字的页面，截图个静态的页面：

结束啦。。。并没有。。。

参考网上一个哥们文章，说的有道理，我们为啥要把js和json文件放在工程外面呢，这不合理啊，他们属于工程内部文件啊，那咱把他们移到工程里面，目录如下：

然后开启packager服务的命令要修改成如下样子了：

其他的都一样了，至于node_modules文件夹为啥不一起移过去，那样据说会很卡...