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。

如图

在 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的权限

往下滑动，配置：

到此为止，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右上角角标显示的数字增加，如图：

加号为英文状态下的

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jpush  # react  # native  # reactnative  # ASP.NET Core 集成 React SPA应用的步骤  # 40行代码把Vue3的响应式集成进React做状态管理  # Spring Boot与React集成的示例代码  # 浅谈react-native热更新react-native-pushy集成遇到的问题  # 在 React 项目中使用 Auth0 并集成到后端服务的配  # 自定义  # 自己的  # 如图  # 到此为止  # 来了  # 我在  # 在此  # 你在  # 均为  # 英文  # 三种  # 作为一个  # 还需要  # 分别为  # 可以选择  # 往下  # 进来了  # 多看  # 官网  # 大家多多 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： js实现点击每个li节点，都弹出其文本值及修改  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  Laravel怎么清理缓存_Laravel optimize clear命令详解  Laravel如何生成URL和重定向？（路由助手函数）  Laravel如何使用Service Provider服务提供者_Laravel依赖注入与容器绑定【深度】  中山网站推广排名,中山信息港登录入口？  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  如何快速辨别茅台真假？关键步骤解析  开心动漫网站制作软件下载,十分开心动画为何停播？  php结合redis实现高并发下的抢购、秒杀功能的实例  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  EditPlus中的正则表达式 实战(2)  如何在 Telegram Web View（iOS）中防止键盘遮挡底部输入框  JavaScript如何实现继承_有哪些常用方法  韩国服务器如何优化跨境访问实现高效连接？  Bootstrap CSS布局之列表  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  如何在云虚拟主机上快速搭建个人网站？  如何用AWS免费套餐快速搭建高效网站？  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  北京的网站制作公司有哪些,哪个视频网站最好？  如何用PHP工具快速搭建高效网站？  微信小程序 input输入框控件详解及实例（多种示例）  利用JavaScript实现拖拽改变元素大小  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  大学网站设计制作软件有哪些,如何将网站制作成自己app？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  如何制作一个表白网站视频,关于勇敢表白的小标题？  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  javascript日期怎么处理_如何格式化输出  如何正确下载安装西数主机建站助手？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  如何快速使用云服务器搭建个人网站？  5种Android数据存储方式汇总  如何破解联通资金短缺导致的基站建设难题？  HTML 中如何正确使用模板变量为元素的 name 属性赋值  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  EditPlus中的正则表达式 实战(1)  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像