ReactNative之通知栏消息提⽰（ios）
React Native之通知栏消息提⽰(ios)
⼀，需求分析与概述
详情请查看：
⼆，极光推送注册与集成
2.1，注册
详情请查看：
2.2，集成(ios)
第⼀步：安装
打开终端，进⼊项⽬根⽬录⽂件夹下，执⾏以下命令：
1 npm install jpush-react-native --save
2 jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native
3 npm install jcore-react-native --save
第⼆步：配置
⾃动关联配置
1 # 针对性的link，避免之前⼿动配置的其它插件重复配置造成报错
2 react-native link jpush-react-native
3 react-native link jcore-react-native
执⾏完 link 项⽬后可能会出现报错，这没关系，打开Xcode⼿动配置⼀下
⼿动配置
(1)，检查Libraries⽂件夹下有没有dproj和dproj⽂件，没有的话就添加⽂件，⽬录在项⽬⽂件夹下的：
1 /node_modules/jpush-react-native/deproj
2 /node_modules/jcore-react-native/deproj
(2)，在 iOS ⼯程 targets 的General->Link Binary with Libraries中加⼊如下库:
1 libRCTJpushModule.a
2 libRCTJcoreModule.a
3 libz.tbd
4 CoreTelephony.framework
5 Security.framework
6 CFNetwork.framework
7 CoreFoundation.framework
8 SystemConfiguration.framework
9 Foundation.framework
10 UIKit.framework
11 UserNotifications.framework
12 libresolv.tbd
(3)，在AppDelegate.h⽂件⾥边添加如下代码：
1static NSString *appKey = @""; //填写appkey
2static NSString *channel = @"nil"; //填写channel ⼀般为nil
3static BOOL isProduction = false; //填写isProdurion 平时测试时为false ，⽣产时填写true
(4)，在AppDelegate.m⽂件⾥边添加如下代码：
1/**
2 * Copyright (c) 2015-present, Facebook, Inc.
3 *声明部分
4*/
5 #import <RCTJPushModule.h>
6 #ifdef NSFoundationVersionNumber_iOS_9_x_Max
7 #import <UserNotifications/UserNotifications.h>
8#endif
9 @implementation AppDelegate
10
12/**
13 * Copyright (c) 2015-present, Facebook, Inc.
14 *功能模块部分
15*/
16 - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
17 {
18 [JPUSHService registerDeviceToken:deviceToken];
19 }
为了在收到推送点击进⼊应⽤程序能够获取该条件推送内容需要在AppDelegate.m的didReceiveRemoteNotification⽅法⾥⾯添加[[NSNotificationCenter defaultCenter] postNotificationName：kJPFDidReceiveRemoteNotification object：userInfo]⽅法
注意：这⾥需要在两个⽅法⾥⾯加⼀个是iOS7以前的⼀个是iOS7及以后的，如果AppDelegate.m没有这个两个⽅法则直接复制这两个⽅法，在iOS10的设备则可以使⽤JPush提供的两个⽅法
1 - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
2 {
3 [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];
4 }
5//iOS 7 Remote Notification
6 - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
7 {
8 [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object: notification.userInfo];
9 }
10// iOS 10 Support
11 - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^) (UIBackgroundFetchResult))completionHandler
12 {
13 [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];
14 }
15 - (void)jpushNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(NSInteger))completionHandler
16 {
17 NSDictionary * userInfo = t.userInfo;
18if ([igger isKindOfClass:[UNPushNotificationTrigger class]]) {
19 [JPUSHService handleRemoteNotification:userInfo];
20 [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];
21 }
22
23 completionHandler(UNNotificationPresentationOptionAlert);
24 }
在didFinishLaunchingWithOptions⽅法⾥⾯添加如下代码：
1 JPUSHRegisterEntity * entity = [[JPUSHRegisterEntity alloc] init];
2 pes = UNAuthorizationOptionAlert|UNAuthorizationOptionBadge|UNAuthorizationOptionSound;
3 [JPUSHService registerForRemoteNotificationConfig:entity delegate:self];
4 [JPUSHService setupWithOption:launchOptions appKey:appKey channel:channel apsForProduction:isProduction];
(5),#import <RCTJPushModule.h>可能会报不到的错误，需要在Build Settings->Search Paths->Hea
der Search Paths添加代码：
1 $(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule
(6)，在Capabilities中点开推送Push Notifications以及Background Modes中的Remote notifications
ios的推送证书申请可参考：
这样就基本完成了所有的配置。接下来就可以在 JS 中调⽤插件提供的 API 了。
三，使⽤与实现
3.1，使⽤
(1)，在js中 1 import React, { PureComponent } from 'react';
2 import {
3 Linking,
4 Alert
5 } from 'react-native';
6 import JPushModule from 'jpush-react-native'
7
8 ...
9
10
11 componentDidMount() {
12 /****************************通知 start **************************************************/
13 if (Platform.OS === 'android') {
14 JPushModule.initPush()
15 // 新版本必需写回调函数
16 ifyJSDidLoad(resultCode => {
17 if (resultCode === 0) {
18 }
19 })
20 } else {
21 JPushModule.setupPush()
23 // 接收⾃定义消息
24 iveCustomMsgListener = map => {
25 this.setState({
26 pushMsg: t
27 })
28 console.log('extras: ' + as)
29 }
30
31 // 接收⾃定义消息JPushModule.iveCustomMsgListener)
32 iveNotificationListener = map => {
33 console.log('alertContent: ' + map.alertContent)
34 console.log('extras: ' + as)
35 }
36 // 接收推送通知
37 JPushModule.iveNotificationListener)
38 // 打开通知
39 this.openNotificationListener = map => {
40 // console.log('Opening notification!')
41 // console.log('a: ' + as)
42 let webUrl= JSON.as).webUrl
43 let url = place(new RegExp("\/", 'g'), "/")
44 Linking.canOpenURL(url).then(supported => {
45 if (!supported) {
46 Alert.alert('您的系统不⽀持打开浏览器！')
47 } else {
48 return Linking.openURL(url);
49 }
50 }).catch(err => { });
51
52 }
53 JPushModule.addReceiveOpenNotificationListener(this.openNotificationListener)
54
55 // RegistrationIdListener = registrationId => {
56 // console.log('Device register succeed, registrationId ' + registrationId)
57 // }
58 // JPushModule.RegistrationIdListener)
59 /****************************通知 end **************************************************/
60
61
62 }
63 componentWillUnmount() {
64 iveCustomMsgListener)
65 iveNotificationListener)
66 veReceiveOpenNotificationListener(this.openNotificationListener)
67 // RegistrationIdListener)
68 // console.log('Will clear all notifications')
69 // JPushModule.clearAllNotifications()
70 }
71
72 }
73
ios13测试版74 ...
ios不⽀持的函数:
setBaseStyle () {
if (Platform.OS === 'android') {
JPushModule.setStyleBasic()
} else {
Alert.alert('iOS not support this function', '')
}
}
setCustomStyle () {
if (Platform.OS === 'android') {
JPushModule.setStyleCustom()
} else {
Alert.alert('iOS not support this function', '')
}
(2)，在极光官⽹上设置与推送
发布评论