React Native集成极光推送
推送作为手机应用的核心功能之一，在实际运用中扮演着重要角色。开发者若自行构建一套完整的推送系统往往需要耗费大量时间和资源；鉴于此，在实际开发过程中我们通常会选择第三方提供的成熟解决方案以节省时间和成本。因此，在React Native开发项目中集成jpush-react-native这一开源库是一种常见且高效的方式；通过该库我们可以方便地配置并集成极光Push的服务实现其消息通知的功能。下面将详细介绍如何配置并集成极光的Push服务以满足开发需求。
JPush账号
首先访问极光官网系统进行操作。如有账号则无需注册账户；否则请先申请一个账户。一旦登录成功即可顺利创建并有效管理个人业务应用。
集成推送
安装JPush库
因为极光开发者服务 SDK 遵循了模块化架构，在采用了一个核心组件（JCore）与多种功能模块（JPush、JAnalytics 等）的组合模式下，在提取公共代码库后能够有效避免功能干扰。
请确保您已切换至项目文件夹中的指定位置；随后，请按照以下步骤操作：
- 打开终端界面；
- 输入相应的命令序列；
- 完成配置。
npm install jpush-react-native --save
npm install jcore-react-native --save
代码解读完成后需要执行link命令，将依赖通知给原生的依赖，命令如下：
react-native link
代码解读或者使用下面的命令：
react-native link jpush-react-native
react-native link jcore-react-native
代码解读Link命令等同于将jpush plugin工程整合进原始项目的工程模块中。通过工具如Android Studio和Xcode即可轻松开启原始项目的构建与调试流程。经过上述操作后会发现原始项目Libraries目录新增了Jpush相关的依赖项。
手动配置
Android配置
对于有原生集成经验的同学来说，在Android开发中使用JPush时需要特别注意的一点是，在完成依赖安装后还需要手动进行一些必要的配置工作。具体操作方法如下：在Android Studio中打开项目的主界面，在应用界面上找到并定位到需要集成jpush-react-native功能模块的位置。然后双击该功能模块所在的工程目录位置，在其子目录下找到build.gradle文件并编辑修改。也就是说，在默认情况下，这些配置会通过'react-native link'命令自动完成必要的设置。
点击Android项目根目录下的'project/android/app/build.gradle'文件进行打开，并按照以下步骤依次设置相关内容。
android {
...
defaultConfig {
applicationId "yourApplicationId" // 在极光官网上申请应用时填写的包名
...
manifestPlaceholders = [
JPUSH_APPKEY: "yourAppKey", //应用APPKey
APP_CHANNEL: "developer-default" //应用渠道号, 默认即可
]
}
}
...
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile project(':jpush-react-native') // 添加 jpush 依赖
compile project(':jcore-react-native') // 添加 jcore 依赖
compile "com.facebook.react:react-native:+" // From node_modules
}
代码解读进入Android系统根目录下的settings.gradle文件，并确认是否已添加相应的设置项
include ':app', ':jpush-react-native', ':jcore-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')
代码解读- 访问应用目录下的 AndroidManifest 配置文件，并确认该配置文件中是否存在与
<meta-data>相关的元数据部分
<meta-data
android:name="JPUSH_APPKEY"
android:value="${JPUSH_APPKEY}" />
<meta-data
android:name="JPUSH_CHANNEL"
android:value="${APP_CHANNEL}" />
代码解读- 完成上述设置后，请对项目的 MainActivity 和 MainApplication 相关代码进行调整。
在 app 下的 MainApplication.java 文件中进行操作，在其中添加JPushPackage库。例如：
// 设置为true将不弹出toast
private boolean SHUTDOWN_TOAST = false;
// 设置为true将不打印log
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)
);
}
};
代码解读关于这部分的内容，请参考MainApplication.java配置。
然后请在MainActivity.java中增加一些初始化配置。
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
JPushInterface.init(this);
}
@Override
protected void onPause() {
super.onPause();
JPushInterface.onPause(this);
}
@Override
protected void onResume() {
super.onResume();
JPushInterface.onResume(this);
}
@Override
protected void onDestroy() {
super.onDestroy();
}
}
代码解读特别注意不同版本之间的实现方式，在此之前与之后的具体写法有所不同，请参考MainActivity初始化配置一节以获取详细信息。完成所有JPush配置后，请在JavaScript中调用插件提供的API函数进行后续操作
Android环境Push实例
按照前面所述的步骤完成操作后即可轻松完成推送发送。然后创建新的推送通知。如图所示。
当我们发送该消息后，就可以在手机端看到相关的信息，如下图。
如果我们需要在调用jpush的API函数，可以参考下面的实现。
import JPushModule from 'jpush-react-native';
...
componentDidMount() {
// 新版本必需写回调函数
// JPushModule.notifyJSDidLoad();
JPushModule.notifyJSDidLoad((resultCode) => {
if (resultCode === 0) {}
});
// 接收自定义消息
JPushModule.addReceiveCustomMsgListener((message) => {
this.setState({pushMsg: message});
});
// 接收推送通知
JPushModule.addReceiveNotificationListener((message) => {
console.log("receive notification: " + message);
});
// 打开通知
JPushModule.addReceiveOpenNotificationListener((map) => {
console.log("Opening notification!");
console.log("map.extra: " + map.extras);
// 可执行跳转操作，也可跳转原生页面
// this.props.navigation.navigate("SecondActivity");
});
}
componentWillUnmount() {
JPushModule.removeReceiveCustomMsgListener();
JPushModule.removeReceiveNotificationListener();
}
代码解读iOS配置
通过Xcode启动React Native开发的iOS原生项目，在Libraries目录中可以看到有一个名为RCTJPushModule.xcodeproj的项目文件，请参考下图。
然后，依次点击TARGETS -> Build phases -> Link Binary With Libraries打开依赖库配置，可以看到如下图所示的系统库依赖。
注释说明：当运行命令'react-native-link'时，在此处设置的相关配置将由系统自动处理。
- 通过Xcode启动iOS项目后，在菜单栏依次点击TARGETS-> BUILD Phases -> LinkBinary with Libraries选项；随后将 “UserNotification.framework status”的属性设置为可选。
- 在iOS工程环境中遇到找不到包含头文件的情况时，请前往TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths设置区域，并添加以下搜索路径信息。
$(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule
代码解读
on
on
on
on
on
接下来，我们需要在极光开发者中心配置相关的证书信息，如下图。
有关如何处理iOS设备上的证书问题, 可以参考极光官方提供的iOS 证书设置指南。现在仅导入了测试环境的CA证书, 导入完成后已生成对应的CA文件路径图片。
当然，你也可以使用Token Authentication方式进行配置。
接着，我们就可以在测试环境中使用极光进行推送了。
在本节中，请注意以下事项：因为模拟器不支持设备密钥（Devicetoken）认证，在实际测试过程中，请确保将项目打包为IPA格式后再进行操作。
附：极光开发文档