集成reactnative到android项目

此例为简短说明如何将reactnative集成到android项目

1.新建文件夹，创建子目录andorid,将android项目移动至android目录下。

2.在根目录下创建package.json文件

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

其中，dependencies中react、react-antive版本号根据需要选择，可使用npm info react 和npm info react-native获取版本信息。

3.在根目录下使用npm install 安装react和react-naive，会在根目录下生成nodemodules目录。也可以从其他项目中直接拷贝nodemodules。

4.配置app/build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
  ...
    compile "com.facebook.react:react-native:+"  // From node_modules.
}

5.配置项目/build.gradle

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

6.配置androidmanifest

添加网络权限
<uses-permission android:name="android.permission.INTERNET" />

7.创建react-native 入口文件index.js。
这里为方便演示demo是一个简单的TextView，显示一句“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, World</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

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

8.创建一个activity，作为启动ReactNative的运行环境并用它来渲染。

<1>继承自AppCompatActivity(android低版本)或Activity。

<2>Activity中需要创建一个ReactRootView对象，用以启动ReactNative。并将它设为界面的视图。

代码如下：

   mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
//                .setJSMainModuleName("index.android") //setJSMainModuleName 有些版本不支持
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意这里的MyReactNativeApp必须对应“index.android.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);

3>实现DefaultHardwareBackBtnHandler，重写invokeDefaultOnBackPressed()对返回键进行处理。

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

<4> 重写onResume()、onPause()、onDestory()方法，将Activity的生命周期回调传给React-Native。ReactNative中生命周期是由ReactInstanceManager处理的。

     @Override
protected void onResume() {
    super.onResume();
    if(mReactInstanceManager!=null){
        mReactInstanceManager.onHostResume(this,this);
    }

}


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

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


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

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

<5>按menu键，显示开发选项对话框，便于调试

 /**
     * 显示开发选项对话框
     * @param keyCode
     * @param event
     * @return
     */
    @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.xml 中声明:

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

<6>对于6.0以上机型，进行悬浮窗权限检查,确保权限开启，以便错误提示正确显示。

/**
     * 检查6.0以上手机是否开启悬浮窗权限
     */
    private void checkOverLayMession(){
        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...
                    Toast.makeText(this,"SYSTEM_ALERT_WINDOW permission not granted...",Toast.LENGTH_SHORT).show();
                }
            }
        }
    }

9.运行：切换目录到android项目根目录下，执行gradlew installDebug ,也可在androidstudio中编译运行。注意启动npm服务器(npm start)

10.打包：先进行jsbundle文件的打包即生成jsbundle离线文件。

命令如下

react-native  bundle --platform  andorid --dev false --entry-file index.js  --bundle-output  android/app/src/main/assets/index.android.bundle  --assets-dest  android/src/main/res/

如果提示无index.js ,请将index.andorid.js复制一份命名为index.js 存放于根目录下，与node_modules同级。经过以上准备，就可以进行android的release打包了。

demo点我