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

更新時間：2017年08月16日 16:38:31 作者：Arno-su

這篇文章主要介紹了React Native 集成jpush-react-native的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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 替換成你在官網(wǎng)上申請的應用的 AppKey。

現(xiàn)在重新 sync 一下項目，應該能看到 jpush-react-native 作為一個 android Library 項目導進來了

重點來了，我在這個地方卡了一天，以上代碼配置完成后，但是不管怎么樣就是接收不到推送。

解決方案：找到項目/node_modules/jpush-react-native/android/src/main/AndroidManifest.xml，里面的 ${applicationId} 全部換成你自己的項目包名

到此為止android的配置結(jié)束。

二.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)

根據(jù)域名配置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 ，生產(chǎn)時填寫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 標準信息內(nèi)容

 [[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); // 需要執(zhí)行這個方法，選擇是否提醒用戶，有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(); // 系統(tǒng)要求執(zhí)行這個方法

}

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

還需要添加新的方法，以監(jiān)聽自定義消息的接受：

//#pragma mark 獲取自定義消息內(nèi)容

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

 NSDictionary * userInfo = [notification userInfo];

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

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

 NSString *customizeField1 = [extras valueForKey:@"123456"]; //自定義參數(shù)，key是自己定義的

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

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

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

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

}

配置代碼，在Xcode中打開push的權限

往下滑動，配置：

到此為止，ios的配置結(jié)束。

然后在RN中配置調(diào)用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右上角角標顯示的數(shù)字增加，如圖：

加號為英文狀態(tài)下的

大家集成的時候多看官方文檔，將兩端的官方demo下載下來，能發(fā)現(xiàn)很多有用的信息。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

React中useCallback useMemo到底該怎么用
在React函數(shù)組件中，當組件中的props發(fā)生變化時，默認情況下整個組件都會重新渲染。換句話說，如果組件中的任何值更新，整個組件將重新渲染，包括沒有更改values/props的函數(shù)/組件。在react中，我們可以通過memo，useMemo以及useCallback來防止子組件的rerender
2023-02-02
React html中使用react的兩種方式
這篇文章主要介紹了React html中使用react的兩種方式,本文給大家提到了React pwa的配置代碼，給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-04
react.js 翻頁插件實例代碼
這篇文章主要介紹了react.js 翻頁插件實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-01-01
一文詳解React類組件中的refs屬性
react中的ref類似于vue中的ref,都是可以操作dom的,這篇文章我們通過一個demo來學習這個屬性,文中有詳細的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下
2023-08-08
React前端渲染優(yōu)化--父組件導致子組件重復渲染的問題
本篇文章是針對父組件導致子組件重復渲染的優(yōu)化方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
react實現(xiàn)移動端二級路由嵌套詳解
這篇文章主要介紹了react移動端二級路由嵌套的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
React中的useEffect四種用法分享
這篇文章主要給大家分享React中的useEffect四種用法，useEffect中觸發(fā)更新，重復的 useEffect，依賴值觸發(fā)回調(diào)，useEffect 的返回值，通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2023-07-07
create-react-app 修改為多入口編譯的方法
這篇文章主要介紹了create-react-app 修改為多入口編譯的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
React三大屬性之props的使用詳解
這篇文章主要介紹了React三大屬性之props的使用詳解，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下
2021-04-04
react中value與defaultValue的區(qū)別及說明
這篇文章主要介紹了react中value與defaultValue的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05