React-Native集成JPush-react-native及应用设置Tags、Alias（iOS/Android）

React-Native集成JPush-react-native及应用设置Tags、Alias（iOS/Android）

最近项目中用到推送功能，且项目是以React-Native框架实现iOS、Android跨平台开发，自然而然就选择了极光实现推送功能，由于以前是iOS开发对Android了解的不很很深，在集成和设置别名等问题上也遇到些坑，现在就把集成步骤及遇到的问题分享出来，仅供大家参考，有什么问题也可以留言一起探讨：

安装

cd到项目根目录

执行 npm install jpush-react-native –save

npm install jcore-react-native –save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native

配置

配置包括两个步骤，自动配置和手动操作。

1.自动配置：以下命令均在你的 React Native 项目目录下运行，自动配置后仍需手动配置一部分）

执行脚本

npm run configureJPush yourAppKey yourModuleName

module name 指的是你 Android 项目中的模块名字(对 iOS 没有影响，不填写的话默认值为 app，会影响到查找 AndroidManifest 问题，

如果没找到 AndroidManifest，则需要手动修改，参考下面的 AndroidManifest 配置相关说明)

举个��：

nam run configureJPush 48f30d0b04d9bc4f5ad7de53 app

执行脚本

react-native link

2.手动配置部分

iOS 手动操作部分 （4步）

在React-Native工程中node_modules -> push-react-native -> ios - > RCTJPushModule -> RCTJPushModule.xcodeproj 拖入iOS工程Libraries中并添加：


在 iOS 工程中设置 TARGETS-> BUILD Phases -> LinkBinary with Libraries 找到 UserNotifications.framework 把 status 设为 optional

在 iOS 工程中如果找不到头文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下路径

$(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule/RCTJPushModule

在 xcode8 之后需要点开推送选项： TARGETS -> Capabilities -> Push Notification 设为 on 状态

Android 手动操作部分

修改 app 下的 build.gradle 配置：

react native 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
}

将此处的 yourApplicationId 替换为你的项目的包名；yourAppKey 替换成你在官网上申请的应用的 AppKey。

检查一下 dependencies 中有没有添加 jpush-react-native 及 jcore-react-native 这两个依赖。

react native project/android/app/build.gradle

...
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 配置有没有包含以下内容：

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

检查一下 app 下的 AndroidManifest 配置，有没有增加 部分。

react native project/android/app/AndroidManifest.xml

<application
...
<!-- Required . Enable it you can get statistics data with channel -->
<meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
<meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>

</application>

然后重新 sync 一下项目，应该能看到 jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了

加入 JPushPackage，有参数！

RN 0.29.0 以下版本

打开 app 下的 MainActivity，在 ReactInstanceManager 的 build 方法中加入 JPushPackage：

app/MainActivity.java



RN 0.29.0 以上版本

打开 app 下的 MainApplication.java 文件，然后加入 JPushPackage,也可以参考官方Demo

// 设置为 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)
);
}
};

到这里Push-react-native就已将集成到iOS和Android工程中了，然后就可以去极光后台发送通知，查看推送消息（注：如果你是Android工程师，在iOS集成后还需将推送证书上传到极光后台认证，认证通过后即可发送推送通知！！！）

上面集成就告一段落了，下面就是在React-Native项目中给iOS和Android 设置Tags和 Alias了：

Note: In Android, you must call initPush first, iOS do
b140
esn’t need.

在设置tags和Alias前 Android项目首先需要在MainActivity中 initPush ，iOS不需要操作：

public class MainActivity extends ReactActivity {

/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "yourApplicationName";
}

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

然后就可以根据你的逻辑及需求（在登录成功或者程序首页等等）去设置Tags及Alias。

-eg：

componentDidMount(){

console.log('componentDidMount');
JPushModule.setTags([this.state.tag], () => {
// Alert.alert('成功', 'tags 成功',[{text: 'OK'}])；
console.log('success set tag');
}, () => {
// Alert.alert('失败','设置alias 失败',[{text:'fail'}]);
console.log('fail set tag');
});

JPushModule.setAlias('James', () => {
Alert.alert('成功', '设置alias 成功',[{text: 'OK'}]);
console.log('成功');
}, () => {
Alert.alert('失败','设置alias 失败',[{text:'fail'}]);
console.log('失败');
});
}

注： 在设置Tags时要传一个数组过去！！！

本编文章以同步到博客：传送门