一. git链接: react-native-xinge-push
1.1 安装
npm install --save react-native-xinge-push
1.2. link
react-native link react-native-xinge-push
二. android配置
2.1. android/settings.gradle
include ':react-native-xinge-push'
project(':react-native-xinge-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-xinge-push/android')
2.2. android/app/build.gradle
defaultConfig: {
...
manifestPlaceholders = [
XG_ACCESS_ID: "xxx", // 此处需要替换
XG_ACCESS_KEY: "xxx", // 此处需要替换
HW_APPID: "",
PACKAGE_NAME: "xxx" // 此处需要替换
]
}
...
dependencies {
...
compile project(':react-native-xinge-push')
...
}
2.3. android/app/src/main/java/com/nativeboilerplate/MainApplication.java
import com.jeepeng.react.xgpush.PushPackage;
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
...
new PushPackage(),
...
);
}
...
2.4. android/app/src/main/AndroidManifest.xml
<application
...>
...
<receiver android:name="com.jeepeng.react.xgpush.receiver.MessageReceiver"
android:exported="true" >
<intent-filter>
<!-- 接收消息透传 -->
<action android:name="com.tencent.android.tpush.action.PUSH_MESSAGE" />
<!-- 监听注册、反注册、设置/删除标签、通知被点击等处理结果 -->
<action android:name="com.tencent.android.tpush.action.FEEDBACK" />
</intent-filter>
</receiver>
...
</application>
三. ios配置
3.1 ios/项目名.xcodeproj/project.pbxproj
参考: example/ios/example.xcodeproj/project.pbxproj
3.2 ios/项目名/AppDelegate.m
#import <XGPush/XGPushManager.h>
#import <XGPush.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[[XGPush defaultManager] reportXGNotificationInfo:launchOptions];
return YES;
}
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
// Required to register for notifications
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
[XGPushManager didRegisterUserNotificationSettings:notificationSettings];
}
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
[XGPushManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
NSLog(@"[XGPush] register APNS fail.
[XGPush] reason : %@", error);
[XGPushManager didFailToRegisterForRemoteNotificationsWithError:error];
}
// Required for the localNotification event.
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
[XGPushManager didReceiveLocalNotification:notification];
}
/**
收到通知消息的回调，通常此消息意味着有新数据可以读取（iOS 7.0+）
@param application UIApplication 实例
@param userInfo 推送时指定的参数
@param completionHandler 完成回调
*/
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
NSLog(@"[XGPush] receive slient Notification");
NSLog(@"[XGPush] userinfo %@", userInfo);
UIApplicationState state = [application applicationState];
BOOL isClicked = (state != UIApplicationStateActive);
NSMutableDictionary *remoteNotification = [NSMutableDictionary dictionaryWithDictionary:userInfo];
if(isClicked) {
remoteNotification[@"clicked"] = @YES;
remoteNotification[@"background"] = @YES;
}
[[XGPush defaultManager] reportXGNotificationInfo:remoteNotification];
[XGPushManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}
// iOS 10 新增 API
// iOS 10 会走新 API, iOS 10 以前会走到老 API
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_10_0
// App 用户点击通知
// App 用户选择通知中的行为
// App 用户在通知中心清除消息
// 无论本地推送还是远程推送都会走这个回调
- (void)xgPushUserNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler {
NSLog(@"[XGPush] click notification");
if ([response.actionIdentifier isEqualToString:@"xgaction001"]) {
NSLog(@"click from Action1");
} else if ([response.actionIdentifier isEqualToString:@"xgaction002"]) {
NSLog(@"click from Action2");
}
[[XGPush defaultManager] reportXGNotificationResponse:response];
completionHandler();
}
// App 在前台弹通知需要调用这个接口
- (void)xgPushUserNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler {
[[XGPush defaultManager] reportXGNotificationInfo:notification.request.content.userInfo];
completionHandler(UNNotificationPresentationOptionBadge | UNNotificationPresentationOptionSound | UNNotificationPresentationOptionAlert);
}
#endif
@end
3.3 修改ios capabilities
3.3.1 remote nitifications
3.3.2 push notifications
3.4 ios证书(开发/生产)
openssl pkcs12 -in 项目名-Development-Certificates.p12 -out 项目名-Development-Certificates.pem -nodes
openssl pkcs12 -in 项目名-Prod-Certificates.p12 -out 项目名-Prod-Certificates.pem -nodes
注：证书运用场景
1. 开发证书
xcode run debug
xcode run release
2. 生产证书
TestFlight
Appstore
四. index.js中配置
import React from 'react';
import XGPush from 'react-native-xinge-push';
import { Platform } from 'react-native';
import { Actions } from 'react-native-router-flux';
class AppRouter extends React.Component {
constructor(props) {
super(props);
this.initPush();
}
componentDidMount() {
this.onXGAddEvent();
}
componentWillUnmount() {
this.onXGRemoveEvent();
}
// 信鸽通知跳转
async onLinkToSceneKeyPath(notification) {
const accessToken = await auth.getToken();
if (!accessToken) return;//非登陆用户
const customContent = isIOS ? notification.custom
: JSON.parse(notification.custom_content);
if (!customContent) return;//没有跳转参数
// 根据信鸽push中的定制参数，进行链接跳转
const { sceneKeyPath, notificationId } = customContent;
if (!sceneKeyPath) return;
const funcName = Actions.currentScene === sceneKeyPath ? 'replace' : 'push';
Actions[funcName](sceneKeyPath, { notificationId });
}
// 信鸽增加事件
onXGAddEvent() {
XGPush.addEventListener('register', this.onRegister);
XGPush.addEventListener('notification', this.onNotification);
}
// 信鸽移除事件
onXGRemoveEvent() {
XGPush.removeEventListener('register', this.onRegister);
XGPush.removeEventListener('notification', this.onNotification);
}
// 初始化推送
initPush = () => {
if (Platform.OS === 'android') {
XGPush.init(ACCESS_ID, ACCESS_KEY); //此处需要替换
} else {
XGPush.init(ACCESS_ID, ACCESS_KEY); //此处需要替换
}
this.initXGRegister();
}
// 注册
initXGRegister = () => {
XGPush.register('packageName')
.then((result) => result)
.catch((err) => {
console.warn('xinge registration fail', err);
});
}
// 注册成功
onRegister = (deviceToken) => {
console.log(`onRegister: ${deviceToken}`);
}
// 通知到达
onNotification = (notification) => {
if (notification.clicked === true) {
this.onLinkToSceneKeyPath(notification);
console.log(`app处于后台时收到通知${JSON.stringify(notification)}`);
} else {
console.log(`app处于前台时收到通知${JSON.stringify(notification)}`);
}
}
render() {
...
}
}
注
1、信鸽推送需要在app 打开，才能收到通知