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" );              });          }      }