在Android原生中嵌入React Native，进而React Native调用原生

http://blog.csdn.net/yuetingzhuying/article/details/51944254

在Android原生中嵌入React Native，进而React Native调用原生

2016-07-18 19:07 838人阅读 评论(0) 收藏 举报

本文章已收录于：


React
Native知识库


分类：

Android开发（5）

js（3）

react
native

版权声明：本文为博主原创文章，未经博主允许不得转载。

首先在Android中嵌入React
Native：

每一个Android Studio project下包含多个module，所以，从命令行进入到module根目录，运行：

[plain] view
plain copy







$ npm init

$ npm install --save react-native

$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
上述命令会创建一些react-native依赖的一些模块，在package.json文件的scripts属性中添加：

[javascript] view
plain copy







"start": "node node_modules/react-native/local-cli/cli.js start"

注：如果scripts中存在其他键值对，则以逗号为分隔符。

在module的根目录创建index.android.js文件，并将一下内容下入index.android.js文件：

[javascript] view
plain copy







'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>

</View>

)

}

}

var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

},

hello: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

});

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

在Android Studio中，在moudle的build.gradle文件中添加一下内容：

[javascript] view
plain copy







allprojects {

repositories {

...

maven {

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

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

}

}

...

}

在AndroidManifest.xml文件中添加网络访问权限（仅在开发或调试中需要该权限）：

<uses-permission
android:name="android.permission.INTERNET"/>

添加原生代码，以此将React native嵌入项目中。创建MyReactActivity类：

[java] view
plain copy







package com.example.third;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.KeyEvent;

import com.example.third.log.AppReactPackage;

import com.facebook.react.LifecycleState;

import com.facebook.react.ReactInstanceManager;

import com.facebook.react.ReactRootView;

import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

import com.facebook.react.shell.MainReactPackage;

/**

* Created by Mini-zy on 16/7/18.

*/

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

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

setContentView(mReactRootView);

}

@Override

public void invokeDefaultOnBackPressed() {

super.onBackPressed();

}

@Override

protected void onPause() {

super.onPause();

if (mReactInstanceManager != null) {

mReactInstanceManager.onHostPause();

}

}

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

}

}

代码的详细解释查阅官方。

在命令行，进入module根目录，运行：

[plain] view
plain copy







$ npm start

不出意外，应该能成功看到Hello World界面。

下面进入React Native调用Android原生部分。

首先，我们来创建一个用于React Native调用的class，名为JsAndroidModule：

[java] view
plain copy







package com.example.third.js;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

/**

* Created by Mini-zy on 16/7/18.

*/

public class JsAndroidModule extends ReactContextBaseJavaModule{

private static final String MODULE_NAME="JsAndroid";

public JsAndroidModule(ReactApplicationContext reactContext) {

super(reactContext);

}

@Override

public String getName() {

return MODULE_NAME;

}

}

JsAndroidModule中MODULE_NAME指定了React Native调用原生的名称。

然后，在JsAndroidModule中添加给React Native调用的方法：

[java] view
plain copy







@ReactMethod

public void jsActivity(){

Intent intent = new Intent(MyApp.getContext(),JsActivity.class);

intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

MyApp.getContext().startActivity(intent);

}

React Native调用的方法需要使用@ReactMethod注解，jsActivity()方法启动一个新的Activity。MyApp继承了Application，为全局提供Context。

创建JsReactPackage，用于注册JsAndroidModule：

[java] view
plain copy







package com.example.third.js;

import com.example.third.log.LogModule;

import com.facebook.react.ReactPackage;

import com.facebook.react.bridge.JavaScriptModule;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;

import java.util.Collections;

import java.util.List;

/**

* Created by Mini-zy on 16/7/18.

*/

public class JsReactPackage implements ReactPackage {

@Override

public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

List<NativeModule> modules = new ArrayList<>();

modules.add(new JsAndroidModule(reactContext));

return modules;

}

@Override

public List<Class<? extends JavaScriptModule>> createJSModules() {

return Collections.emptyList();

}

@Override

public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

}

在上文中MyReactActivity类中的onCreate方法中初始化JsReactPackage：

[java] view
plain copy







@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())

.addPackage(new AppReactPackage())

.addPackage(new JsReactPackage())

.setUseDeveloperSupport(BuildConfig.DEBUG)

.setInitialLifecycleState(LifecycleState.RESUMED)

.build();

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

setContentView(mReactRootView);

}

注：这里和官方给出不同。官方说在MainActivity中添加getPackages()函数，但是出现了异常。同时，考虑到官方的场景与本文不同，所以应该在MyReactActivity类中初始化。

官方说可以使用一个单例来管理ReactInstanceManager。

在与index.android.js相同的目录下创建JsAndroid.js文件：

[javascript] view
plain copy







'use strict';

import { NativeModules } from 'react-native';

module.exports = NativeModules.JsAndroid;

代码中的JsAndroid就是JsAndroidModule.class中指定的模块名。

在index.android.js文件中饮用JsAndroid模块，并添加按钮，调用jsActivity方法：

[javascript] view
plain copy







'use strict';

import React from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

TouchableOpacity

} from 'react-native';

import Log from './Log';

import JsAndroid from './JsAndroid';

class HelloWorld extends React.Component {

constructor(props){

super(props);

//console.log(NativeActivity);

Log.d('Succ','Success!!!');

Log.i('Succ','Success!!!');

}

_newNativeActivity(){

JsAndroid.jsActivity();

}

render() {

return (

<View style={styles.container}>

<Text style={styles.hello}>Hello, World</Text>

<TouchableOpacity onPress={this._newNativeActivity}>

<Text>New Native Activity</Text>

</TouchableOpacity>

</View>

)

}

}

var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

},

hello: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

});

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

最后，运行，注意npm start。