我爱编程

React Native接极光推送整合

2018-04-13  本文已影响0人  Jr_38e7
jpush版本2.1.19

准备

1.申请极光应用获取一个AppKey
2.安装

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

3.执行link命令(如果ios使用pod集成则不需要link)

react-native link jpush-react-native
react-native link jcore-react-native
然后会要求输入AppKey

[? Input the appKey for JPush

输入申请的AppKey如

39572b757f7864531e427016(换成你自己的)

link的时候安卓没问题ios可能会报如下错误,此时需要手动配置xcode（见下文IOS部分）
rnpm-install info Linking jpush-react-native android dependency 
rnpm-install info Android module jpush-react-native has been successfully linked 
rnpm-install info Linking jpush-react-native ios dependency 
rnpm-install ERR! Something went wrong while linking. Error: Cannot read property 'match' of undefined 
Please file an issue here: https://github.com/facebook/react-native/issues

IOS篇

打开 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文件里边添加如下代码

（1）声明部分
#import <RCTJPushModule.h>
#ifdef NSFoundationVersionNumber_iOS_9_x_Max
#import <UserNotifications/UserNotifications.h>
#endif
@implementation AppDelegate
（2）功能模块部分
- (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 pod集成篇

1.安装集成pod，自行谷歌
2.ios目录下添加文件pod.file放入如下代码

platform :ios, '9.0'
target 'myApp' do
    md_path='../node_modules'
    rn_path = '../node_modules/react-native'
    pod 'JPushRN', path:"#{md_path}/jpush-react-native"
    pod 'JCoreRN', path:"#{md_path}/jcore-react-native"
    pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
    pod 'React', path: rn_path,subspecs: [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
    ]
end
post_install do |installer|
    installer.pods_project.targets.each do |target|
        targets_to_ignore = %w(React yoga)
        if targets_to_ignore.include? target.name
            target.remove_from_project
        end
    end
end

然后执行pod install

3.同上，4同上，6同上，其他跳过，pod集成可以避免手动配置的很多问题，推荐

Android篇

打开Android Studio

如果你link成功的话下边的配置会自动配好,不成功需要手动配置

1.修改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
}

2.检查android项目下的settings.gradle配置有没有包含以下内容：

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

3.检查一下app的AndroidManifest配置，有没有增加<meta-data>部分。

<application
        ...
        <!-- 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>
然后是需要手动配置的

4.打开应用程序的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
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected String getJSMainModuleName() {         // rn 0.49 后修改入口为 index
            return "index";
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)   //  <-- 添加 JPushPackage
             );
        }
    };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

使用

引入

import JPushModule from 'jpush-react-native'

需要先初始化注册，不然收不到推送

JPushModule.initPush()

安卓在调用方法前需要调用

JPushModule.notifyJSDidLoad(data=>{
  //代码
});

否则其他方法不能监听到通知事件

其他详见https://github.com/jpush/jpush-react-native

上一篇 下一篇

猜你喜欢

热点阅读