前言

一个App的灵魂就在于它能及时的给用户推送信息，没有推送功能的App跟咸鱼没有什么区别。前两天在React-Native开发的App中集成了第三方的推送功能。这边做个记录和总结。

一注册申请极光账号及设置

具体的申请步骤就不叙述了。可以到极光官网进行注册。

注册完之后需要对我们的账号进行设置

1.首先创建一个应用。

2.然后对刚才创建的应用进行设置，安卓应用比较简单，直接填写你App的包名即可。

3.ios的设置相对于安卓复杂了一点。具体流程如下：

1.下面步骤的前提是在拥有了苹果开发者账号并且已经创建过了应用，如果对这一流程有不是很熟悉的可以自行百度。

2.然后去苹果开发者账号里面找到你应用所对应的bundle id 如下图，然后点击你应用的id进入详情页面，找到
Push Notifications选项并勾选它 表示你的应用将启用消息推送的功能。同时需要设置push推送证书如下图2所示。

3.在设置push推送证书的时候会让你上传CSR文件

4.CSR文件可以在自己苹果系统中找到:具体步骤为 找到系统中的钥匙串->证书助理->从证书颁发机构申请证书->填写“用户邮箱”和“常用名称” ，并选择“存储到磁盘”，证书文件后缀为 .certSigningRequest 

5.然后把上一步保存下来的证书上传到刚才页面里要上传csr文件的地方。证书上传成功后。就可以把后辍为.cer的文件下载下来。

6.双击打开刚才下载下来的.cer文件即可通过钥匙串进行打开。然后把它导出为.p12格式的文件然后上传到极光ios应用里。

图1

图2

三集成到项目中

安装

npm i jpush-react-native --save
npm i jcore-react-native --save

注意：如果您使用的RN版本是0.60以上则不需要对第三方包主动进行link。native modules会自动进行link

Android配置

首先设置build.gradle

android {
      defaultConfig {
          manifestPlaceholders = [
                  JPUSH_APPKEY: "yourAppKey",         //在此替换你的APPKey
                  JPUSH_CHANNEL: "yourChannel"        //在此替换你的channel 这边一般不用修改，默认即可
          ]
      }
  }
  
  dependencies {
      ...
      implementation project(':jpush-react-native')  // 添加 jpush 依赖
      implementation project(':jcore-react-native')  // 添加 jcore 依赖
  }

注意：上面的APPkey就是你在极光里注册应用的appkey

然后在修改AndroidManifest.xml

<meta-data
	android:name="JPUSH_CHANNEL"
	android:value="${JPUSH_CHANNEL}" />
<meta-data
	android:name="JPUSH_APPKEY"
	android:value="${JPUSH_APPKEY}" />

最后在MainApplication.java中进行引用

package com.example;

import android.app.Application;

import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.List;

import cn.jiguang.plugins.push.JPushModule;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      //RN0.60以下需要打开，注意导包JPushPackage
      //packages.add(new JPushPackage());
      return packages;
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

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

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    //调用此方法：点击通知让应用从后台切到前台
    JPushModule.registerActivityLifecycle(this);
  }
}

ios配置

安装

cd ios
pod install

如果项目里使用pod安装过，请先执行命令pod deintegrate

然后在xcode中打开项目。在Libraries中添加以下两个文件

node_modules/jcore-react-native/ios/RCTJCoreModule.xcodeproj
node_modules/jpush-react-native/ios/RCTJPushModule.xcodeproj

在xcode中开启通知推送功能 (每个版本的xcode开启方法略有不同)。

如果在运行的时可能会报缺少头文件的错误可以把这个两个文件添加进去

All --- Search Paths --- Header Search Paths --- +
$(SRCROOT)/../node_modules/jcore-react-native/ios/RCTJCoreModule/
$(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule/

最后需要在Build Phases中添加以下框架和插件

CFNetwork.framework
CoreFoundation.framework
CoreTelephony.framework
SystemConfiguration.framework
CoreGraphics.framework
Foundation.framework
UIKit.framework
Security.framework
libz.tbd（Xcode 7 以下版本是 libz.dylib）
AdSupport.framework（获取 IDFA 需要；如果不使用 IDFA，请不要添加）
UserNotifications.framework（Xcode 8 及以上）
libresolv.tbd（JPush 2.2.0 及以上版本需要，Xcode 7 以下版本是 libresolv.dylib）

以上就是RN集成极光推送的一个流程。

如有错误的地方，还请见谅。可在下面评论指出，我会第一时间进行确认和修改。

ios证书配置参考资料

参考资料

RN集成极光推送

前言

一 注册申请极光账号及设置

三 集成到项目中

安装

Android配置

ios配置

一注册申请极光账号及设置

三集成到项目中