React Native之通知栏消息提示(ios)

React Native之通知栏消息提示(ios)

一,需求分析与概述

详情请查看：React Native之通知栏消息提示(android)

二,极光推送注册与集成

2.1,注册

详情请查看：React Native之通知栏消息提示(android)

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文件夹下有没有RCTJpushModule.xcodproj和RCTJcoreModule.xcodproj文件,没有的话就添加文件，目录在项目文件夹下的：

1 /node_modules/jpush-react-native/ios/RCTJPushModule.xcodeproj
2 /node_modules/jcore-react-native/ios/RCTJCoreModule.xcodeproj

 

(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文件里边添加如下代码：

1 static NSString *appKey = @"";     //填写appkey
2 static NSString *channel = @"nil";    //填写channel   一般为nil
3 static 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 
11 
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 = notification.request.content.userInfo;
18   if ([notification.request.trigger 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   entity.types = 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->Header Search Paths添加代码：

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

(6),在Capabilities中点开推送Push Notifications以及Background Modes中的Remote notifications

 

ios的推送证书申请可参考：react native极光推送android和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 JPushModule.notifyJSDidLoad(resultCode => { 17 if (resultCode === 0) { 18  } 19  }) 20 } else { 21  JPushModule.setupPush() 22  } 23 // 接收自定义消息 24 this.receiveCustomMsgListener = map => { 25 this.setState({ 26  pushMsg: map.content 27  }) 28 console.log('extras: ' + map.extras) 29  } 30 31 // 接收自定义消息JPushModule.addReceiveCustomMsgListener(this.receiveCustomMsgListener) 32 this.receiveNotificationListener = map => { 33 console.log('alertContent: ' + map.alertContent) 34 console.log('extras: ' + map.extras) 35  } 36 // 接收推送通知 37 JPushModule.addReceiveNotificationListener(this.receiveNotificationListener) 38 // 打开通知 39 this.openNotificationListener = map => { 40 // console.log('Opening notification!') 41 // console.log('map.extra: ' + map.extras) 42 let webUrl= JSON.parse(map.extras).webUrl 43 let url = webUrl.replace(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 // this.getRegistrationIdListener = registrationId => { 56 // console.log('Device register succeed, registrationId ' + registrationId) 57 // } 58 // JPushModule.addGetRegistrationIdListener(this.getRegistrationIdListener) 59 /****************************通知 end **************************************************/ 60 61 62  } 63  componentWillUnmount() { 64 JPushModule.removeReceiveCustomMsgListener(this.receiveCustomMsgListener) 65 JPushModule.removeReceiveNotificationListener(this.receiveNotificationListener) 66 JPushModule.removeReceiveOpenNotificationListener(this.openNotificationListener) 67 // JPushModule.removeGetRegistrationIdListener(this.getRegistrationIdListener) 68 // console.log('Will clear all notifications') 69 // JPushModule.clearAllNotifications() 70  } 71 72 } 73 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),在极光官网上设置与推送