react-native 极光推送（jpush-react-native）

极光推送官方支持的 React Native 插件

安装

npm install jpush-react-native --save
npm install jcore-react-native --save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native

一、自动配置部分（以下命令均在你的 REACT NATIVE PROJECT 目录下运行，自动配置后仍需手动配置一部分）

1.1执行脚本
npm run configureJPush <yourAppKey> <yourModuleName>
//module name 指的是你 Android 项目中的模块名字(对 iOS 没有影响，不填写的话默认值为 app，会影响到查找 AndroidManifest 问题，
//如果没找到 AndroidManifest，则需要手动修改，参考下面的 AndroidManifest 配置相关说明)
//举个例子:
npm run configureJPush d4ee2375846bc30fa51334f5 app
1.2Link 项目
//执行自动配置脚本后再执行 link 操作
react-native link

二、手动操作部分 （3个步骤）

2.1

第一步：修改 app 下的 build.gradle 配置：
your react native project/android/app/build.gradle

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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。

2.2

检查是否导入以下配置项：
检查一下 dependencies 中有没有添加 jpush-react-native 及 jcore-react-native 这两个依赖。

your react native project/android/app/build.gradle

1 2 3 4 5 6 7

... 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 }

　　

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

settings.gradle

1 2 3

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')

　　

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

your react native project/android/app/AndroidManifest.xml

1 2 3 4 5 6 7

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

　　

2.3：加入 JPushPackage (找到 app 下的 MainApplication.java)：

app/src.../MainApplication.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

private boolean SHUTDOWN_TOAST = false;   private boolean SHUTDOWN_LOG = false;     private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {         @Override       protected boolean getUseDeveloperSupport() {           return BuildConfig.DEBUG;       }           @Override       protected List<ReactPackage> getPackages() {           return Arrays.<ReactPackage>asList(                   new MainReactPackage(),                   //加入 JPushPackage                   new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)           );

　　

上面 JPushPackage 的两个参数是 bool 类型的，第一个参数设置为 true 表示关闭 toast 提示，第二个设置为 true 表示关闭日志打印，建议在 debug 版本中打开。然后在 MainActivity 中加入一些初始化代码即可：

app/src.../MainActivity.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

public class MainActivity extends ReactActivity {        ...     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         JPushInterface.init(this);     }       @Override     protected void onPause() {         super.onPause();         JPushInterface.onPause(this);     }       @Override     protected void onResume() {         super.onResume();         JPushInterface.onResume(this);     } }

　　

收到推送

添加了此事件后，在收到推送时将会触发此事件。

需要注意的是，v1.6.6 版本以后，增加了 notifyJSDidLoad 方法，在监听所有相关事件之前要调用此方法，否则不会收到点击通知事件。

example/react-native-android/push_activity.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

... import JPushModule from 'jpush-react-native'; ... export default class PushActivity extends React.Component {     componentDidMount() {         // 在收到点击事件之前调用此接口         JPushModule.notifyJSDidLoad((resultCode) => {             if (resultCode === 0) {             }         });         JPushModule.addReceiveNotificationListener((map) => {             console.log("alertContent: " + map.alertContent);             console.log("extras: " + map.extras);             // var extra = JSON.parse(map.extras);             // console.log(extra.key + ": " + extra.value);         }); }

　　

点击通知

在用户点击通知后，将会触发此事件。

1 2 3 4 5 6 7

... componentDidMount() {     JPushModule.addReceiveOpenNotificationListener((map) => {             console.log("Opening notification!");             console.log("map.extra: " + map.key);         }); }

　　

得到 REGISTRATIONID

用户注册成功后（一般在用户启动应用后），如果订阅了这个事件，将会收到这个 registrationId。

1 2 3 4 5 6

...     componentDidMount() {         JPushModule.addGetRegistrationIdListener((registrationId) => {             console.log("Device register succeed, registrationId " + registrationId);         });     }

　　

清除所有通知

建议在用户退出前台后调用。

1 2 3 4 5

...  componentWillUnmount() {      console.log("Will clear all notifications");      JPushModule.clearAllNotifications();  }

　　

设置标签

example/react-native-android/set_activity.js

1 2 3 4 5 6 7 8 9 10 11 12 13

...   setTag() {       if (this.state.tag !== undefined) {           /*           * 请注意这个接口要传一个数组过去，这里只是个简单的示范           */                JPushModule.setTags(["VIP", "NOTVIP"], () => {               console.log("Set tag succeed");           }, () => {               console.log("Set tag failed");           });       }   }

　　

设置别名

1 2 3 4 5 6 7 8 9 10

...     setAlias() {         if (this.state.alias !== undefined) {             JPushModule.setAlias(this.state.alias, () => {                 console.log("Set alias succeed");             }, () => {                 console.log("Set alias failed");             });         }     }