一个简单的demo说明集成reactnative到android项目

集成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()对返回键进行处理。

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

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

     @Overrideprotected void onResume() {    super.onResume();    if(mReactInstanceManager!=null){        mReactInstanceManager.onHostResume(this,this);    }}@Overrideprotected void onPause() {    super.onPause();    if(mReactInstanceManager!=null){        mReactInstanceManager.onHostPause(this);    }}@Overrideprotected 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点我