React Native 集成jpush-react-native的示例代码


Posted in Javascript onAugust 16, 2017

jpush-React-native是极光推送官方维护的一个插件,github地址:https://github.com/jpush/jpush-react-native

一.手动配置

1.集成插件到项目中

npm install jpush-react-native --save
rnpm link jpush-react-native

Android

使用 android Studio import 你的 react Native 应用(选择你的 React Native 应用所在目录下的 android 文件夹即可)

修改 android 项目下的 settings.gradle 配置: settings.gradle

include ':app', ':jpush-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir,'../node_modules/jpush-react-native/android')

修改 app 下的 AndroidManifest 配置,将 jpush 相关的配置复制到这个文件中,参考 demo 的 AndroidManifest:(增加了 部分)

your react native project/android/app/AndroidManifest.xml

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:icon="@drawable/ic_launcher"
  android:label="@string/app_name"
  android:theme="@style/AppTheme">
  <activity
   android:name=".MainActivity"
   android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
   android:label="@string/app_name">
   <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
  </activity>

  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

  <!-- 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>

修改 app 下的 build.gradle 配置: your react native project/android/app/build.gradle

修改 app 下的 build.gradle 配置:

your 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')
 compile "com.facebook.react:react-native:+" // From node_modules
}

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

现在重新 sync 一下项目,应该能看到 jpush-react-native 作为一个 android Library 项目导进来了

重点来了,我在这个地方卡了一天,以上代码配置完成后,但是不管怎么样就是接收不到推送。

解决方案:找到项目/node_modules/jpush-react-native/android/src/main/AndroidManifest.xml,里面的 ${applicationId} 全部换成 你自己的项目包名

到此为止android的配置结束。

二.iOS配置

打开 ios 工程,在 rnpm link 之后,RCTJPushModule.xcodeproj 工程会自动添加到 Libraries 目录里面

在 iOS 工程 target 的 Build Phases->Link Binary with Libraries 中加入如下库:

CFNetwork.framework
CoreFoundation.framework
CoreTelephony.framework
SystemConfiguration.framework
CoreGraphics.framework
Foundation.framework
UIKit.framework
Security.framework
libz.tbd (Xcode7以下版本是libz.dylib)
UserNotifications.framework (Xcode8及以上)
libresolv.tbd (JPush 2.2.0及以上版本需要, Xcode7以下版本是libresolv.dylib)

根据域名配置info.plist:

把需要的支持的域添加?NSExceptionDomains。其中jpush.cn作为Key,类型为字典类型。

每个域下面需要设置2个属性:NSIncludesSubdomains、NSExceptionAllowsInsecureHTTPLoads。

两个属性均为Boolean类型,值分别为YES、YES。

如图

React Native 集成jpush-react-native的示例代码

在 AppDelegate.h 文件中 填写如下代码,这里的的 appkey、channel、和 isProduction 填写自己的

static NSString *appKey = @”“; //填写appkey

static NSString *channel = @”“; //填写channel 一般为nil

static BOOL isProduction = false; //填写isProdurion 平时测试时为false ,生产时填写true

在AppDelegate.m 里面添加如下代码

1.引入依赖文件

#import <RCTJPushModule.h>
 #ifdef NSFoundationVersionNumber_iOS_9_x_Max
 #import <UserNotifications/UserNotifications.h>
 #endif

 @interface AppDelegate()

 @end

2.在didFinishLaunchingWithOptions方法里添加

if ([[UIDevice currentDevice].systemVersion floatValue] >= 10.0) {

 JPUSHRegisterEntity * entity = [[JPUSHRegisterEntity alloc] init];

 entity.types = UNAuthorizationOptionAlert|UNAuthorizationOptionBadge|UNAuthorizationOptionSound;

 [JPUSHService registerForRemoteNotificationConfig:entity delegate:self];

 }else if ([[UIDevice currentDevice].systemVersion floatValue] >= 8.0) {

 //可以添加自定义categories
 [JPUSHService registerForRemoteNotificationTypes:(UNAuthorizationOptionBadge |
              UNAuthorizationOptionSound |
              UNAuthorizationOptionAlert)
           categories:nil];
 }else {

 //categories 必须为nil
 [JPUSHService registerForRemoteNotificationTypes:(UNAuthorizationOptionBadge |
              UNAuthorizationOptionSound |
              UNAuthorizationOptionAlert)
           categories:nil];
 }

 [JPUSHService setupWithOption:launchOptions appKey:appKey
      channel:nil apsForProduction:isProduction];

3.加入jupush的代码

- (void)application:(UIApplication *)application

didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {

 [JPUSHService registerDeviceToken:deviceToken];

}
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {

 // 取得 APNs 标准信息内容

 [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];

}

这个方法是清除icon角标

- (void)applicationWillEnterForeground:(UIApplication *)application {
 [application setApplicationIconBadgeNumber:0];
// [application cancelAllLocalNotifications];
}
//iOS 7 Remote Notification

- (void)application:(UIApplication *)application didReceiveRemoteNotification: (NSDictionary *)userInfo fetchCompletionHandler:(void (^) (UIBackgroundFetchResult))completionHandler {

 [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];

}
// iOS 10 Support

- (void)jpushNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(NSInteger))completionHandler {

 // Required

 NSDictionary * userInfo = notification.request.content.userInfo;

 if([notification.request.trigger isKindOfClass:[UNPushNotificationTrigger class]]) {

 [JPUSHService handleRemoteNotification:userInfo];

 [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];

 }

 completionHandler(UNNotificationPresentationOptionAlert); // 需要执行这个方法,选择是否提醒用户,有Badge、Sound、Alert三种类型可以选择设置

}
// iOS 10 Support

- (void)jpushNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler {

 // Required

 NSDictionary * userInfo = response.notification.request.content.userInfo;

 if([response.notification.request.trigger isKindOfClass:[UNPushNotificationTrigger class]]) {

 [JPUSHService handleRemoteNotification:userInfo];

 [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];

 }

 completionHandler(); // 系统要求执行这个方法

}
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {

 //Optional

 NSLog(@"did Fail To Register For Remote Notifications With Error: %@", error);

}

如果想要获取到自定义消息的话,需要在didFinishLaunchingWithOptions方法中添加一下代码:

//获取自定义消息
 NSNotificationCenter *defaultCenter = [NSNotificationCenter defaultCenter];

 [defaultCenter addObserver:self selector:@selector(networkDidReceiveMess

还需要添加新的方法,以监听自定义消息的接受:

//#pragma mark 获取自定义消息内容

- (void)networkDidReceiveMessage:(NSNotification *)notification {

 NSDictionary * userInfo = [notification userInfo];

 NSString *content = [userInfo valueForKey:@"content"];

 NSDictionary *extras = [userInfo valueForKey:@"extras"];

 NSString *customizeField1 = [extras valueForKey:@"123456"]; //自定义参数,key是自己定义的

 NSLog(@"自定义message:%@",userInfo);

 NSLog(@"推%@",content);

 NSLog(@"推%@",extras);

 NSLog(@"推%@",customizeField1);

}

 配置代码,在Xcode中打开push的权限

React Native 集成jpush-react-native的示例代码

往下滑动,配置:

React Native 集成jpush-react-native的示例代码

到此为止,ios的配置结束。

然后在RN中配置调用jpush的代码:

import JPushModule from 'jpush-react-native';
 
constructor(props) {
  super(props);
  if(Platform.OS === 'android') JPushModule.initPush();
 }
componentDidMount(){
  if (Platform.OS === 'android') {
   BackAndroid.addEventListener('hardwareBackPress', this._onBackAndroid);

   //-----------jpush android start
   // JPushModule.getInfo((map) => {
   //  console.log(map);
   // });
   // JPushModule.addReceiveCustomMsgListener((message) => {
   // });
   JPushModule.addReceiveNotificationListener((message) => {
    console.log("receive notification: ");
    console.log(message);
   });
   JPushModule.addReceiveOpenNotificationListener((map) => {

    console.log("Opening notification!");
    console.log(map);
   });
   //-----------jpush android end
  }


  //-----------jpush ios start
  if (Platform.OS === 'ios') {
   this.subscription = NativeAppEventEmitter.addListener(
    'ReceiveNotification',
    (notification) => {
     console.log('-------------------收到推送----------------');
     console.log(notification)
    }
   );
  }
  //-----------jpush ios end
 }

 componentWillUnmount(){
  if (Platform.OS === 'android') {
   BackAndroid.removeEventListener('hardwareBackPress', this._onBackAndroid);
  }
  JPushModule.removeReceiveCustomMsgListener();
  JPushModule.removeReceiveNotificationListener();
  this.subscription && this.subscription.remove();
 }

 然后就可以去官方控制台,手动推送通知了

想要icon右上角角标显示的数字增加,如图:

React Native 集成jpush-react-native的示例代码

加号为英文状态下的

大家集成的时候多看官方文档,将两端的官方demo下载下来,能发现很多有用的信息。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中find与each方法用法实例
Feb 04 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 #Javascript
微信小程序删除处理详解
Aug 16 #Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 #Javascript
微信小程序实现根据字母选择城市功能
Aug 16 #Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 #Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 #Javascript
You might like
php 文本文件的读取效率
2012/02/10 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python静态方法实例
2015/01/14 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
护理专业推荐信
2013/11/07 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
预备党员的自我评价
2014/03/12 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
写给医生的感谢信
2015/01/22 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript