jpush-react-native android端內建——個人記錄

為什麼選用極光？因為這個 jpush-react-native 是極光官網維護的 ，而且關于原生方面配置也不是很多，友善搞前端從事RN的同學使用。

官網注冊 賬号https://www.jiguang.cn/，擷取 AppKey

image.png

自動link配置
npm install jpush-react-native --save
rnpm link jpush-react-native

我這裡報錯了  需要 link jcore-react-native
Project :app declares a dependency from configuration 'compile' to configuration 'default' which is not declared in the descriptor for project :jcore-react-native.
           

執行完 link 項目後可能會出現報錯，需要手動配置一下 build.gradle 檔案。

如果沒有 手動加上

image.png

image.png

image.png

在AndroidManifest 添加 
 <meta-data
        android:name="JPUSH_APPKEY"
        android:value="${JPUSH_APPKEY}" />
    <meta-data
        android:name="JPUSH_CHANNEL"
        android:value="${APP_CHANNEL}" />
           

配置好後 sync 同步 一下項目， jpush-react-native 以及 jcore-react-native 作為 android Library 項目導進來了。

在app 下的 MainApplication.java 檔案，加入 JPushPackage

import cn.jpush.reactnativejpush.JPushPackage;

   @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          .....
              new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
    //注意 在 MainApplication類下要定義  這兩個變量  在下圖位置
     private boolean SHUTDOWN_TOAST = false;
     private boolean SHUTDOWN_LOG = false;

      );
    }

           

image.png

在 MainActivity.java下添加如下代碼 别忘記導入包

import cn.jpush.android.api.JPushInterface;

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

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }


           

Android 配置到這裡已經完成，然後就是RN 中的使用

在我們工程的根目錄下
componentDidMount(){
 // 接收自定義消息
        JPushModule.addReceiveCustomMsgListener((message) => {
            console.log("message :" + JSON.stringify(message))
        });
        // 接收推送通知
        JPushModule.addReceiveNotificationListener((message) => {
       //這種情況 是一般 我們app處于運作狀态 下會觸發
            console.log("接受通知: " + JSON.stringify(message));
        });
        // 打開通知
        JPushModule.addReceiveOpenNotificationListener((map) => {
            console.log("打開通知!");
            //這裡的 map.extras  //可選設定的鍵值對
            //map.alertContent   //推送的消息内容
            //ios   是  alert
            console.log(JSON.stringify(map))
            console.log("map.extra: " + map.extras);

            // 在這裡 就可以處理 我們的路由跳轉了  根據 我們推送的時候 約定好的鍵值對
    

           

image.png

這裡有個可選項 可以判斷我們的路由跳轉等

image.png

這裡我們隻是手動發送推送，進行測試，還要服務層配合我們 背景內建推送 主動觸發 。

android效果

ios端內建待更新