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

1、自動配置部分（如下命令均在你的 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

2、手動操做部分 （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" );              });          }      }