扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下Android原生项目集成React Native的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
开发环境准备
首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件（比如npm）。
在应用中添加JS代码
在项目的根目录中运行：
$ npm init $ npm install --save react react-native $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
npm init创建了一个空的node模块（其实就是创建了一个package.json描述文件），而npm install则创建了node_modules目录并把react和react-native下载到了其中。至于第三步curl命令，其实质是下载.flowconfig配置文件，这个文件用于约束js代码的写法。这一步非必需，可跳过。下面我们打开新创建的package.json文件，然后在其scripts字段中加入:
"start": "node node_modules/react-native/local-cli/cli.js start"
现在你的package.json内容应该类似这样：
{
"name": "react-example",
"version": "1.0.0",
"description": "this is my first react example",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"keywords": [
"react",
"android",
"example"
],
"author": "max",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-native": "^0.42.3"
}
}接下来在项目根目录中创建index.android.js文件，然后将下面的代码复制粘贴进来：
'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
Hello, World
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('react-example', () => HelloWorld); 准备工作
在你的app中 build.gradle 文件中添加 React Native 依赖:
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
}然后Sync的时候可能会有如下报错（坑一）：
复制代码 代码如下:
Error:Conflict with dependency 'com.google.code.findbugs:jsr305' in project ':app'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
Google一下解决方案，我们需要在app的build.gradle中添加如下代码：
android {
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
}编译完美通过！哈哈~
在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 “allprojects” 代码块中:
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
...
}正常情况下项目的build.gradle文件和node_modules目录都是在根目录下面，所以需要把
url "$rootDir/../node_modules/react-native/android" 改为 url "$rootDir/node_modules/react-native/android"
接着，在 AndroidManifest.xml 清单文件中声明网络权限:
如果需要访问 DevSettingsActivity 界面，也需要在 AndroidManifest.xml 中声明:
添加原生代码
想要通过原生代码调用 React Native ，就像这样，我们需要在一个 Activity 中创建一个 ReactRootView 对象，将它关联一个 React application 并设为界面的主视图。
如果你想在安卓5.0以下的系统上运行，请用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。
public class MyReactActivity extends AppCompatActivity 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")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意这里的react-example必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "react-example", 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);
}
}注意这里的react-example必须对应“index.android.js”中的“AppRegistry.registerComponent()”的第一个参数，以及package.json中的name属性保持一致
我们需要把 MyReactActivity 的主题设定为 Theme.AppCompat.Light.NoActionBar ，因为里面有许多组件都使用了这一主题。