你不可不知的 React Native 混合用法（Android 篇）
前言
当前 React Native 虽说版本更新比较快，各种组件也提供的很全面了，但是在某些情况下，混合开发的方式才会快速缩短开发周期，原因无非就是原生平台的“底蕴”无疑更深，拥有众多且类型丰富的第三方支持库。很多情况下，运用这些库可以避免苦逼的重复劳动。接下来我们以 [jpush-react-native 插件](https://github.com/jpush/jpush-react-native)为例来看看在 React Native 中如何使用原生的第三方库。
开始
在开始之前，你必须安装以下软件：npm 命令行工具，react-native 命令行工具， Android Studio。jpush-react-native 是[极光推送](https://www.jiguang.cn/)提供的 React Native 版本插件，可以让我们快速集成推送功能。实际上这个插件就是一个混合应用，使用他们自己的原生 SDK，并且封装了一些接口，让开发者可以在 JS 和原生平台之间互相调用。接下来我们只需要三个步骤就可以完成绝大多数原生库在 React Native 中的应用。
先明确两个概念，在 Android Studio 中一个项目往往会包含很多模块（Module），项目中的 build.gradle 配置一般对所有 module 生效。而 Module 中的 build.gradle 则配置了该 Module 所需的依赖或者任务等等。
第一步——安装
在命令行中进入 React Native 项目，然后使用如下两个命令即可完成 jpush-react-native 插件的安装：
npm install jpush-react-native --save
rnpm link jpush-react-native
jpush-react-native 发布到 npm 了，所以使用命令行可以轻松安装。
然而有很多第三方库可能需要原生的安装方式。比如提供 jar 包或者 aar 包的方式在 Android 中很常见，也有可能以 maven 依赖的方式安装。如果是以上方式安装需要做一些调整：
- jar 包或者 aar 包的方式：
i. 将依赖包复制到 module 的 libs 文件夹下（如果没有则需要手动创建）
ii. 在 build.gradle 中添加：
android {
...
sourceSets {
main {
jniLibs.srcDirs = ['libs']
}
}
...
}
...
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
}
- 以 maven 依赖的方式：
i. 在项目的 build.gradle 中增加：
allprojects {
repositories {
...
mavenCentral()
maven {
url "https://oss.sonatype.org/content/repositories/snapshots/"
}
}
}
ii. 在 module 的 build.gradle 中添加：
dependencies {
...
compile 'xxx-SNAPSHOT'
}
其中的 xxx 指代 groupId、artifactId 以及版本号（以 : 分隔），一般都会由提供方给出。比如 ActiveAndroid：
compile 'com.michaelpardo:activeandroid:3.1.0-SNAPSHOT'
第二步——适配（配置）
这一步因第三方库而异，其实大多都是大同小异，有的库甚至不需要配置直接可以“搭建桥梁”使用。jpush-react-native 还是要配置一下的 首先在命令行中运行脚本：
// 将 AppKey 和 Module Name 替换成自己的
npm run configureJPush [AppKey] [Module Name]
- 配置 AndroidManifest
<meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
<meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
将以上代码复制到你 Module 的 AndroidManifest 下即可。
- 配置 build.gradle
打开与 AndroidManifest 同级的 build.gradle 文件，做以下改动：
android {
...
defaultConfig {
// 换成自己的包名
applicationId "com.xxx"
...
manifestPlaceholders = [
JPUSH_APPKEY: "xxx", //在此替换你的AppKey，极光官网注册应用获得
APP_CHANNEL: "developer-default" //应用渠道号
]
}
}
到此配置完成。
第三步 搭建桥梁
这一步是最后也是最核心的一步。“搭建桥梁”主要是在 Native 侧提供一些 @ReactMethod 标签的方法，或者在 Native 中处理后回调到 JS，说白了就是要使得 JS 和 Native 可以相互调用。这也是混合开发的优势所在，原生平台提供的库，我们只需要搭建一下桥梁，就可以拿来使用。只要稍微写一点原生的代码，可以省去我们绝大部分工作。许多刚接触 React Native 的人不知道如何在 Native 中打开 JS 的界面（众所周知，JS 的界面由一个个 Component 组成，有自己的路由系统）后面我会写一个简单例子，用 Native 的方式声明注册界面（在 Android 中即为 Activity），然后用 JS 渲染界面，这个问题就迎刃而解了。接下来还是先看看 jpush-react-native 的例子。
首先在你的 Module 下创建一个 ManiActivity 以及 MainApplication 类。RN 0.29 后，需要在 MainApplication 中添加原生模块。
MainActivity.java
public class MainActivity extends ReactActivity implements DefaultHardwareBackBtnHandler {
@Override
protected String getMainComponentName() {
// 这里返回的名字要与 JS 侧注册的 Component 名字一致
return "PushDemoApp";
}
@Override
protected void onPause() {
super.onPause();
JPushInterface.onPause(this);
}
@Override
protected void onResume() {
super.onResume();
JPushInterface.onResume(this);
}
}
接下来需要在 MainApplication 中增加原生模块
MainApplication.java
public class MainApplication extends Application implements ReactApplication {
private boolean SHUTDOWN_TOAST = false;
private boolean SHUTDOWN_LOG = false;
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
这样就完成了。在 Android Studio 中 sync 一下，可以看到 jpush-react-native 作为 Library Module 导进来了。打开 JPushModule 类，看到其中的 onReceive 方法，通知的处理都在这一块。在极光推送后台发送通知（也可以使用 服务端 sdk）后，客户端 sdk 收到通知后会回调到 onReceive 方法，在 onReceive 中可以做一些定制化的操作。比如收到通知后，点击通知打开特定的界面：
public static class JPushReceiver extends BroadcastReceiver {
public JPushReceiver() {
HeadlessJsTaskService.acquireWakeLockNow(mRAC);
}
@Override
public void onReceive(Context context, Intent data) {
...
} else if (JPushInterface.ACTION_NOTIFICATION_OPENED.equals(data.getAction())) {
Logger.d(TAG, "用户点击打开了通知");
Intent intent = new Intent();
intent.setClassName(context.getPackageName(), context.getPackageName() + ".MainActivity");
intent.putExtras(bundle);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TOP);
// 如果需要跳转到指定的界面，那么需要同时启动 MainActivity 及指定界面(SecondActivity)：
// If you need to open appointed Activity, you need to start MainActivity and
// appointed Activity at the same time.
Intent detailIntent = new Intent();
detailIntent.setClassName(context.getPackageName(), context.getPackageName() + ".SecondActivity");
detailIntent.putExtras(bundle);
Intent[] intents = {intent, detailIntent};
// 同时启动 MainActivity 以及 SecondActivity
context.startActivities(intents);
// 或者回调 JS 的某个方法
}
}
...
@ReactMethod
public void finishActivity() {
Activity activity = getCurrentActivity();
if (activity != null) {
activity.finish();
}
}
上面的例子中，我们在收到点击通知的事件时，打开一个特定的界面。这个界面在 Native 中创建（这样做的好处在于还可以实现一些特定的需求，比如收到通知后，如果存在 SecondActivity，则让位于 SecondActivity 之上的界面全部弹出，如果不存在，则创建等等之类的需求），但是还是用 JS 的代码来渲染界面，这对于熟悉 JS 的同学来说，再好不过。要做到这一点，首先我们创建一个 SecondActivity （与 MainActivity 同级）类：
SecondActivity.java
public class SecondActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
// 注意这个名字与 JS 对应的 Component 中
// AppRegistry.registerComponent 方法的第一个参数相同
return "SecondActivity";
}
}
然后在 AndroidManifest 注册 SecondActivity：
AndroidManifest
<activity android:name=".SecondActivity" />
在 React Native 项目下新建一个文件夹 react-native-android，专门用来存放 js 相关的文件。新建 second.js 文件：
second.js
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
AppRegistry,
View,
Text,
TouchableHighlight,
StyleSheet,
NativeModules,
} = ReactNative;
var JPushModule = NativeModules.JPushModule;
export default class second extends React.Component {
constructor(props) {
super(props);
}
onBackPress = () => {
let navigator = this.props.navigator;
if (navigator != undefined) {
this.props.navigator.pop();
} else {
console.log("finishing second activity");
JPushModule.finishActivity();
}
}
onButtonPress = () => {
console.log("will jump to setting page");
let navigator = this.props.navigator;
if (navigator != undefined) {
this.props.navigator.push({
name: "setActivity"
});
} else {
}
}
render() {
return (
<View>
<TouchableHighlight
style={styles.backBtn}
underlayColor = '#e4083f'
activeOpacity = {0.5}
onPress = {this.onBackPress}>
<Text>
Back
</Text>
</TouchableHighlight>
<Text
style={styles.welcome}>
Welcome !
</Text>
<TouchableHighlight underlayColor = '#e4083f'
activeOpacity = {0.5}
style = {styles.btnStyle}
onPress = {this.onButtonPress}>
<Text style={styles.btnTextStyle}>
Jump To Setting page!
</Text>
</TouchableHighlight>
</View>
);
}
}
var styles = StyleSheet.create({
backBtn: {
padding: 10,
marginTop: 10,
marginLeft: 10,
borderWidth: 1,
borderColor: '#3e83d7',
backgroundColor: '#3e83d7',
borderRadius: 8,
alignSelf: 'flex-start'
},
welcome: {
textAlign: 'center',
margin: 10,
},
btnStyle: {
marginTop: 10,
borderWidth: 1,
borderColor: '#3e83d7',
borderRadius: 8,
backgroundColor: '#3e83d7',
alignSelf: 'center',
justifyContent: 'center'
},
btnTextStyle: {
textAlign: 'center',
fontSize: 25,
color: '#ffffff'
},
});
AppRegistry.registerComponent('SecondActivity', () => second);
就这样，大功告成！接下来可以在 index.android.js 中注册路由，使得在 JS 中也可以跳转到这个界面。源码请戳这里
总结
以上就是在 React Native 中以混合的方式开发应用的大概过程。用这种方式可以马上使用丰富的原生平台第三方库，只是在 Native 部分需要写些代码，但是花费的代价远远小于自己用 JS 的方式再实现一遍。
作者：KenChoi - 极光
原文：你不可不知的 React Native 混合用法（Android 篇）
知乎专栏：极光日报
极光，最专业的消息推送服务平台
