android原生项目嵌入ReactNative 模块

1.在原有 Android 项目中嵌入 ReactNative 模块

ReactNative的发展已经进入了很多开发者视野，作为一名原生开发者更是对 RN 充满了无限的好奇和期待
相信对于小白的我们，第一步就是如何优雅的集成rn项目,废话不多说直接进入主题(我这边是利用了as3.0创建)

1、项目的准备

1、首先创建一个android项目
2、搭建一些必要的环境 node.js  rn环境(相信这个网上一搜一大把，只要按步骤搭建即可)
3、项目的改造后的流程图(这里盗用下网上的图)

image.png

2、项目的依赖添加

• 在原生 Android 项目的在app/build.gradle文件中，添加React Native依赖(位置可参照下方的图片)

ndk {
            abiFilters "armeabi-v7a", "x86"
        }
packagingOptions {
        exclude "lib/arm64-v8a/librealm-jni.so"
    }
implementation 'com.facebook.react:react-native:+'

image.png

• 在工程目录下找到工程的 build.gradle文件中，添加 maven依赖

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

• 在AndroidManifast 文件里面添加权限

3、创建项目入口

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onClick(View view) {
        startActivity(new Intent(this,Reactactivity.class));
    }
}

4、创建rn的入口

public class Reactactivity 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")
//              相信很多人都是这个方法，但是我的没有可能是我的版本更新了方法名替换了，有哪一个方法就用哪一个
//                .setJSMainModuleName("index.android")
                .setJSMainModulePath("index.android")
                .addPackage(new MainReactPackage())
                /**
                 * http://stackoverflow.com/questions/37951246/react-native-cannot-find-development-server-integrating-existing-android-app
                 * 调试模式下,建议直接写成 true 吧,我就因为这个错误,调了两天原因
                 */
//                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "hello", null);

        setContentView(mReactRootView);
    }

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

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

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


}

5、在AndroidManifast 文件里面添加创建RN的Activity

6、下面配置工程项目的 RN开发环境

1、先后顺序依次执行一下命令
       $ npm init
这里需要你自己配置下package.json 里面的一些东西，照着提示配置可以参照下面的图片配置即可
之后你的工程下面就会出现package.json 这个文件，然后打开添加，位置可参照下方图片
        "start": "node node_modules/react-native/local-cli/cli.js start"

image.png

image.png

接着依次输入下面的命令

$ npm install --save react
 $ npm install --save react-native
 $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

7、工程目录下创建 index.android.js文件由于是测试，里面内容我是copy的

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

class AwesomeProject extends Component {
  render() {
    return (
      
        
          Welcome to React Native!
        
        
          我是 原生项目嵌入的 ReactNative
        
        
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


//注意：这个hello要和前面RN入口里面(startReactApplication方法里面的参数)的相对应
AppRegistry.registerComponent('hello', () => AwesomeProject);

8、现在你可以运行的你的android项目

运行之后使用：npm start 或者react-native start

====================================

以下是踩过的坑

unable to load script from assets 'index.android.bundle'
..............
..........

如果报这个错，说明你没有这个index.android.bundle文件

解决办法：

在你的app/main/src/目录下面创建assets这个见文夹之后运行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output 
app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res