你不可不知的 React Native 混合用法(Android 篇)
前言当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的“底蕴”无疑更深,拥有众多且类型丰富的第三方支持库。很多情况下,运用这些库可以避免苦逼的重复劳动。接下来我们以 jpush-react-native 插件为例来看看在 React Native 中如何使用原生的第三方库。 开始在开始之前,你必须安装以下软件:npm 命令行工具,react-native 命令行工具, Android Studio。jpush-react-native 是极光推送提供的 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 依赖的方式安装。如果是以上方式安装需要做一些调整:
android { ... sourceSets { main { jniLibs.srcDirs = ['libs'] } } ... } ... dependencies { compile fileTree(dir: "libs",include: ["*.jar"]) }
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]
<meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/> <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/> 将以上代码复制到你 Module 的 AndroidManifest 下即可。
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,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 篇) >知乎专栏:极光日报 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |