android开发rn插件,在Android原生应用中嵌入React Native

开发工具：Android Studio ， WebStorm

参考链接：React Native官方中文文档

一.创建React Native项目

1.在本地React Native项目目录下，创建一个文件夹，取名为为ReactApp[名字随便取]

2.在ReactApp文件夹下，创建一个名为android文件夹【注：小写】,并将你现有的Android项目拷贝到/android子目录中。

3.在ReactApp文件夹下，创建一个名为package.json的空文本文件，并将以下内容拷入：

{

"name": "ReactApp",

"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.46.4"

}

}

注：代码中name为你当前RN项目的名称，语法请严格遵守Json语法规范

4.接下来我们使用npm(node包管理器，Node package manager)在项目根目录安装React和React Native模块，打开终端运行：npm install ,RN所需要的模块会被安装到项目根目录下的node_modules/目录中。

二.打开Android Studio 将/android子目录作为Android项目导入到AS中，导入项目无报错，开始以下步骤：

配置maven：

注：如果项目minSdkVersion小于16，请修改为16，RN不支持16版本以下的设备 1.在你的app中 build.gradle 文件中添加 React Native 依赖: dependencies {

...

compile "com.facebook.react:react-native:+" // From node_modules.

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

repositories {

jcenter()

maven {

// All of React Native (JS, Android binaries) is installed from npm

url "$rootDir/../node_modules/react-native/android"

}

}

}

注：同步Gradle如果报这个错误：

Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.1) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.

在你的app中 build.gradle 文件中添加: android{

...

configurations.all {

resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'

}

}

配置权限 1.在 AndroidManifest.xml 清单文件中声明网络权限: 2.如果需要访问 DevSettingsActivity 界面(即开发者菜单)，则还需要在 AndroidManifest.xml 中声明:

三.用WebStorm打开创建ReactApp项目：

在项目根目录创建名为index.android.js文件，代码如下：

import React, {Component} from 'react';

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

//import MyLog from './js/MyLog';

//import MyToast from './js/MyToast';

class ReactApp extends Component {

constructor(props) {

super(props);

//MyLog.debug("yxjie", "constructor");

//MyLog.info('yxjie', 'constructor');

}

render() {

//MyLog.debug("yxjie", "render");

return (

欢迎来到RN界面

);

}

}

const styles = StyleSheet.create({

flex: {

flex: 1,

backgroundColor: 'skyblue',

},

center: {

justifyContent: 'center',

alignItems: 'center',

},

text: {

fontSize: 22,

fontWeight: 'bold',

color: 'black',

}

});

AppRegistry.registerComponent('ReactApp', () => ReactApp);

四.配置权限以便开发中开启ＲＮ红屏错误能正确显示【Android 入口Activity中配置】

1. 入口Activity的onCreate方法中添加如下代码：

//检测是否开启悬浮窗权限【RN】

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

}

}

2. 加入onActivityResult方法回调：

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

}

}

}

}

五.核心内容：【创建展示React Native代码显示界面，并在AndroidManifest.xml申明】

请原谅我的懒惰直接贴代码：

public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{

private ReactRootView mReactRootView;

private ReactInstanceManager mReactInstanceManager;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this);

mReactInstanceManager = ReactInstanceManager.builder()

.setApplication(getApplication())

.setBundleAssetName("index.android.bundle")

.setJSMainModuleName("index.android")

.addPackage(new MainReactPackage())

// .addPackage(new AnExampleReactPackage())

.setUseDeveloperSupport(BuildConfig.DEBUG)

.setInitialLifecycleState(LifecycleState.RESUMED)

.build();

// 注意这里的MyReactNativeApp必须对应“index.android.js”中的

// “AppRegistry.registerComponent()”的第一个参数

mReactRootView.startReactApplication(mReactInstanceManager, "ReactApp", null);

setContentView(mReactRootView);

}

@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

protected void onDestroy() {

super.onDestroy();

if (mReactInstanceManager != null) {

mReactInstanceManager.onHostDestroy();

}

}

@Override

public void onBackPressed() {

if (mReactInstanceManager != null) {

mReactInstanceManager.onBackPressed();

} else {

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

}

}

注：以上代码RN官方文档都有解释，再次不废话【有不明白的请移步RN官方文档，或给我留言，谢谢！！！】

五.运行代码【若是真机调试，请用adb命令行修改设备端口为8081】

1.直接用Android Studio run一下你的代码；

2.运行Packager，再React Native项目根目录，打开终端直接运行：npm start 开启RN服务；

DuangDuangDuang~~ 看到运行结果 是不是很激动，哈哈 ！

下篇文章，会写RN注册并调用Android原生模块的控件方法

React Native调用Android原生方法

以上内容，如有错误，欢迎留言指正！ 谢谢~~~