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