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

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

 

(2),在 iOS 工程 targets 的 General->Link Binary with Libraries 中加入如下库:

libRCTJpushModule.a
libRCTJcoreModule.a
libz.tbd
CoreTelephony.framework
Security.framework
CFNetwork.framework
CoreFoundation.framework
SystemConfiguration.framework
Foundation.framework
UIKit.framework
UserNotifications.framework
libresolv.tbd

(3),在AppDelegate.h文件里边添加如下代码：

static NSString *appKey = @"";     //填写appkey
static NSString *channel = @"nil";    //填写channel   一般为nil
static BOOL isProduction = false;  //填写isProdurion  平时测试时为false ，生产时填写true

(4),在AppDelegate.m文件里边添加如下代码：

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *声明部分
 */
#import <RCTJPushModule.h>
#ifdef NSFoundationVersionNumber_iOS_9_x_Max
#import <UserNotifications/UserNotifications.h>
#endif
@implementation AppDelegate


/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *功能模块部分
 */
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [JPUSHService registerDeviceToken:deviceToken];
}

为了在收到推送点击进入应用程序能够获取该条件推送内容需要在AppDelegate.m的didReceiveRemoteNotification方法里面添加[[NSNotificationCenter defaultCenter] postNotificationName：kJPFDidReceiveRemoteNotification object：userInfo]方法

注意：这里需要在两个方法里面加一个是iOS7以前的一个是iOS7及以后的，如果AppDelegate.m没有这个两个方法则直接复制这两个方法，在iOS10的设备则可以使用JPush提供的两个方法

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
{
  [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];
}
//iOS 7 Remote Notification
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
  [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object: notification.userInfo];
}
// iOS 10 Support
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)   (UIBackgroundFetchResult))completionHandler
{
  [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];
}
- (void)jpushNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(NSInteger))completionHandler
{
  NSDictionary * userInfo = notification.request.content.userInfo;
  if ([notification.request.trigger isKindOfClass:[UNPushNotificationTrigger class]]) {
    [JPUSHService handleRemoteNotification:userInfo];
    [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];
  }

  completionHandler(UNNotificationPresentationOptionAlert);
}

在 didFinishLaunchingWithOptions方法里面添加如下代码：

JPUSHRegisterEntity * entity = [[JPUSHRegisterEntity alloc] init];
  entity.types = UNAuthorizationOptionAlert|UNAuthorizationOptionBadge|UNAuthorizationOptionSound;
  [JPUSHService registerForRemoteNotificationConfig:entity delegate:self];
  [JPUSHService setupWithOption:launchOptions appKey:appKey channel:channel apsForProduction:isProduction];

(5),#import <RCTJPushModule.h>可能会报找不到的错误，需要在Build Settings->Search Paths->Header Search Paths添加代码：

$(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),在极光官网上设置与推送