react-native-jpush

1. 安装 

npm install jpush-react-native jcore-react-native --save

2. 自动配置，根据提示，输入 appKey 等即可。

react-native link

3. 手动配置，参考官方说明文档

https://github.com/jpush/jpush-react-native

ios手动配置

参考：IOS 配置

  • 在 iOS 工程中设置 TARGETS-> BUILD Phases -> LinkBinary with Libraries 找到 UserNotifications.framework 把 status 设为 optional
  • 在 iOS 工程中如果找不到头文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下路径
$(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule
  • 在 xcode8 之后需要点开推送选项： TARGETS -> Capabilities -> Push Notification 设为 on 状态
android手动配置

参考：安卓配置检查

安卓使用

  • 修改 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')  // 添加 jpush 依赖
    compile project(':jcore-react-native')  // 添加 jcore 依赖
    compile "com.facebook.react:react-native:+"  // From node_modules
}

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

  • app 下 MainApplication.java 文件，然后加入 JPushPackage
import cn.jpush.reactnativejpush.JPushPackage;   // <--   导入 JPushPackage
 public class MainApplication extends Application implements ReactApplication { 
// 设置为 true 将不会弹出 toast private boolean SHUTDOWN_TOAST = false; 
// 设置为 true 将不会打印 log private boolean SHUTDOWN_LOG = false; 
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 
... 
@Override protected List<ReactPackage> getPackages() { 
return Arrays.<ReactPackage>asList( 
new MainReactPackage(), 
new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG) // <-- 添加 JPushPackage 
); 
} }; 
... 
}

4. 使用

JS代码中使用

import JPushModule from 'jpush-react-native';

_jumpSecondActivity () {
 console.log('jump to SecondActivity')
 // JPushModule.jumpToPushActivityWithParams('SecondActivity', {
 // hello: 'world'
 // })
 this.props.navigation.navigate('Push')
 }

// example
componentDidMount() {
  if (Platform.OS === 'ios') {
   //ios打开事件监听
   JPushModule.addOpenNotificationLaunchAppListener(notification => {
     console.log('addOpenNotificationLaunchAppListener')
   })
  } else {
   //android支持，在其它功能之前调用
   JPushModule.notifyJSDidLoad((resultCode) => {
     if (resultCode === 0) {
       console.log('notifyJSDidLoad ok');
     }
   });
 }
 JPushModule.addReceiveNotificationListener((map) => {
   console.log('addReceiveNotificationListener:' + JSON.stringify(map));
 });
 JPushModule.addReceiveOpenNotificationListener((map) => {
   console.log("Opening notification!");
   //接收到消息后跳转到app中的相应页面
   this._jumpSecondActivity();
 });
 JPushModule.addReceiveCustomMsgListener((map) => {
   this.setState({pushMsg: message});
   console.log("extras: " + map.extras);
 });
//获取注册成功后的registrationId
 JPushModule.getRegistrationID(registrationId => {
   console.log("Device register, registrationId :" + registrationId);
 })
  }

  componentWillUnmount() {
    JPushModule.removeReceiveCustomMsgListener();
    JPushModule.removeReceiveNotificationListener();
    JPushModule.removeReceiveOpenNotificationListener();
    JPushModule.removeOpenNotificationLaunchAppEventListener();
  }

IOS 清除 badge

//程序在运行时收到通知，点击通知栏进入app 
- (void)jpushNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(NSInteger))completionHandler { 
  [UIApplication sharedApplication].applicationIconBadgeNumber = 0; 
  [JPUSHService setBadge:0]; 
} 
//程序在后台时收到通知，点击通知栏进入app
 - (void)jpushNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler { 
  [UIApplication sharedApplication].applicationIconBadgeNumber = 0; 
  [JPUSHService setBadge:0];
} 
//点击App图标，使App从后台恢复至前台 
- (void)applicationWillEnterForeground:(UIApplication *)application { 
  [application setApplicationIconBadgeNumber:0]; 
  [application cancelAllLocalNotifications]; 
} 
//按Home键使App进入后台 
- (void)applicationDidEnterBackground:(UIApplication *)application{ 
  [application setApplicationIconBadgeNumber:0]; 
  [application cancelAllLocalNotifications]; 
}

(1) [UIApplication sharedApplication].applicationIconBadgeNumber = 0;
(2) [JPUSHService setBadge:0];／[application cancelAllLocalNotifications];//清除所有通知
这两个方法要同时使用才能清除本地图标和远程的通知！

IOS bandge 可以自动增加

官网控制台的设置 badge 的步骤：推送>发送通知>选择一个iOS目标平台>展开可选设置> iOS > badge

  • N：推送时设置为固定的数值，收到时角标便显示该数值。
  • +N 或 -N：收到时角标值 = 极光服务器存储的值 ± N：
    • A 收到时角标为 P ± N，B 收到时角标为 Q ± N。
    • 因此如果推送时使用 ± N，那么客户端就需要注意本地和极光服务器的角标应同步设置。

IOS 安装 app 后弹出设置消息的框

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  JPUSHRegisterEntity * entity = [[JPUSHRegisterEntity alloc] init];
  entity.types = UNAuthorizationOptionAlert|UNAuthorizationOptionBadge|UNAuthorizationOptionSound;
  [JPUSHService registerForRemoteNotificationConfig:entity delegate:self];
}

5. ios 错误

提示：RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

修改AppDelegate.m

#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
 ...
 RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
 moduleProvider:nil
 launchOptions:launchOptions];
#if RCT_DEV
 [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
 RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
 moduleName:@"Test"
 initialProperties:nil];
 ...
}

常见问题

参考：常见问题

ios证书设置说明：

参考：iOS 证书设置指南

Android常见问题：

参考：Android SDK FAQ