React native集成到Android原生应用

React native集成到Android原生应用

附上另一篇RN集成到ios应用：http://blog.csdn.net/unhappy_long/article/details/77770994

我们默认有一个已有的Android项目，或者创建一个Android应用。

第一步：
我们需要在原生项目的根目录下创建一个名为package的json文件：

在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.12",
    "react-native": "0.47.2"
  }
}

然后在项目的根目录下使用 npm install 安装react native所依赖的包。OK，第一步我们算完成了。

第二步：
我们需要新建一个名为index.android.js的文件，用于编写RN的代码，和注册RN的组件，用于注入到Android原生页面中，然后在js文件中加入一下代码：

'use strict';
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>
                <Text style={styles.hello}>尼玛的,终于好了</Text>
            </View>
    )
    }
}
var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    hello: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

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

第三步：
在build.gradel （app下的切记不要弄错了） 配置RN依赖环境：

dependencies {
    ......
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+" // From node_modules.
}

这里必须要降低appcompat-v7的版本，改为23.0.1，不然将会报异常，无法通过编译。

在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 “allprojects” 代码块中:

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

然后在defaultConfig下配置ndk，并且将minSdkVersion的最低使用版本改为16，targetSdkVersion改为21：

defaultConfig {
        ......
        minSdkVersion 16
        targetSdkVersion 21
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

然后，在gradle.properties文件里，配置ndk的使用权限：

android.useDeprecatedNdk=true

如果不配置将会报异常，无法通过编译。

第四步：配置ReactRootView：
我们新建一个activity或者是直接在mainActivity里面创建我们的ReactRootView：

import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.provider.Settings;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

//LifecycleState这个包别导错了，否侧会报错
import com.facebook.react.common.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    private static final int OVERLAY_PERMISSION_REQ_CODE = 0x1111;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

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

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
               //.setUseDeveloperSupport(BuildConfig.DEBUG)
                .setUseDeveloperSupport(true) //开发者支持,开发的时候要设置为true，不然无法使用开发者菜单
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

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

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        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);
    }

    @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...
                }
            }
        }
    }
}

这里可以参考RN中文网：http://reactnative.cn/docs/0.47/integration-with-existing-apps.html#content

第五步：配置权限：

//配置网络请求权限，如果需要的话
 <uses-permission android:name="android.permission.INTERNET" />
 //配置悬浮框权限，用于呼起开发者调式窗口
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

我们要把当前引用RN组件的Activity的主题设为Theme.AppCompat.Light.NoActionBar：

 <activity
   android:name=".MyReactActivity"
   android:label="@string/app_name"
 android:theme="@style/Theme.AppCompat.Light.NoActionBar">
 </activity>

第六步：运行

我们首先要在项目的根目录下运行 npm start 启动本地开发服务器（package），然后，保持packager的窗口运行不要关闭，然后像往常一样编译运行你的Android应用(在命令行中执行./gradlew installDebug或是在Android Studio中编译运行)。

然后终于可以在模拟器上看到我们千呼万唤的RN界面啦！！！

最后附上Demo地址：https://github.com/1035901787/MyReactNativeForAn