概述

jpush-react-native 是極光推送官方開(kāi)發(fā)的 React Native 版本插件，可以快速集成推送功能。現(xiàn)在最新版本的 JPush SDK 分離了 JPush 及 JCore，讓開(kāi)發(fā)者可以分開(kāi)集成 JMessage 及 JPush（以前 JMessage 包含了 JPush）。
我沒(méi)有 mac 設(shè)備，所以只說(shuō) Android 的配置。

安裝

打開(kāi)終端，進(jìn)入項(xiàng)目文件夾，執(zhí)行以下命令：

$ npm install jpush-react-native --save
# jpush-react-native 1.4.2 版本以后需要同時(shí)安裝 jcore-react-native
$ npm install jcore-react-native --save 

配置

1. 自動(dòng)配置部分

官方:

$ react-native link

作者推薦:

# 針對(duì)性的link，避免之前手動(dòng)配置的其它插件重復(fù)配置造成報(bào)錯(cuò)
$ react-native link jpush-react-native
$ react-native link jcore-react-native

執(zhí)行完 link 項(xiàng)目后可能會(huì)出現(xiàn)報(bào)錯(cuò)，這沒(méi)關(guān)系，需要手動(dòng)配置一下 build.gradle 文件。

2. 手動(dòng)配置部分

在 Android Studio 中打開(kāi)你的項(xiàng)目，然后找到 app 或者你自己定義的需要集成 jpush-react-native 的模塊，打開(kāi)此模塊下的 build.gradle 文件，做以下改動(dòng)：

project/android/app/build.gradle

android {
    ...
    defaultConfig {
        applicationId "yourApplicationId" // 此處改成你在極光官網(wǎng)上申請(qǐng)應(yīng)用時(shí)填寫的包名
        ...
        manifestPlaceholders = [
                JPUSH_APPKEY: "yourAppKey", //在此替換你的 APPKey
                APP_CHANNEL: "developer-default"    //應(yīng)用渠道號(hào), 默認(rèn)即可
        ]
    }
}
...
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 項(xiàng)目下的 settings.gradle 配置有沒(méi)有包含以下內(nèi)容：

project/android/settings.gradle

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 配置，有沒(méi)有增加 <meta-data> 部分。

project/android/app/AndroidManifest.xml

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

現(xiàn)在重新 sync 一下項(xiàng)目，應(yīng)該能看到 jpush-react-native 以及 jcore-react-native 作為 android Library 項(xiàng)目導(dǎo)進(jìn)來(lái)了。

接下來(lái)加入 JPushPackage

• RN 0.29.0 以下版本

打開(kāi) app 下的 MainActivity，在 ReactInstanceManager 的 build 方法中加入 JPushPackage：

project/android/app/MainActivity.java

• RN 0.29.0 以上版本

打開(kāi) app 下的 MainApplication.java 文件，然后加入 JPushPackage，參考 demo：

    // 設(shè)置為 true 將不彈出 toast
    private boolean SHUTDOWN_TOAST = false;
    // 設(shè)置為 true 將不打印 log
    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(),
                    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
            );
        }
    };

然后在 MainActivity 中加入一些初始化代碼即可：

project/android/app/src/java/.../MainActivity.java

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

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

這樣就完成了所有的配置。接下來(lái)就可以在 JS 中調(diào)用插件提供的 API 了。

使用

import JPushModule from 'jpush-react-native';

...

componentDidMount() {
    // 新版本必需寫回調(diào)函數(shù)
    // JPushModule.notifyJSDidLoad();
    JPushModule.notifyJSDidLoad((resultCode) => {
          if (resultCode === 0) {}
    });

    // 接收自定義消息
    JPushModule.addReceiveCustomMsgListener((message) => {
      this.setState({pushMsg: message});
    });
    // 接收推送通知
    JPushModule.addReceiveNotificationListener((message) => {
      console.log("receive notification: " + message);
    });
    // 打開(kāi)通知
    JPushModule.addReceiveOpenNotificationListener((map) => {
      console.log("Opening notification!");
      console.log("map.extra: " + map.extras);
      // 可執(zhí)行跳轉(zhuǎn)操作，也可跳轉(zhuǎn)原生頁(yè)面
      // this.props.navigation.navigate("SecondActivity");
    });
  }

  componentWillUnmount() {
    JPushModule.removeReceiveCustomMsgListener();
    JPushModule.removeReceiveNotificationListener();
  }

常見(jiàn)問(wèn)題

錯(cuò)誤處理

> Could not expand ZIP 'F:\workspace\rn\node_modules\jpush-react-native\android\build\outputs\aar\jpush-react-native-release.aar'.

解決:
問(wèn)題是使用命令行窗口時(shí)缺少權(quán)限，不能解壓文件。
解決辦法是以管理員身份運(yùn)行命令，刪除...\node_modules\jpush-react-native\android\build，...\node_modules\jcore-react-native\android\build\和...\android\app\build\，然后嘗試重新運(yùn)行

管理員身份運(yùn)行命令.png

> ... set canOverrideExistingModule=true

解決:
問(wèn)題是在/android/app/src/java/.../MainApplication.java的getPackages()中重復(fù)引用了某個(gè)package，刪除掉重復(fù)內(nèi)容即可

更多高級(jí)應(yīng)用查看官方說(shuō)明