jpush-react-native 推送功能（Android 篇）

標籤：src   http   建議   ...   1.4   register   boolean   申請   red   

github原地址

極光推送官方支援的 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
 

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

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

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

<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

  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

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

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

　　

點擊通知

在使用者點擊通知後，將會觸發此事件。

...componentDidMount() {    JPushModule.addReceiveOpenNotificationListener((map) => {            console.log("Opening notification!");            console.log("map.extra: " + map.key);        });}

　　

得到 REGISTRATIONID

使用者註冊成功後（一般在使用者啟動應用後），如果訂閱了這個事件，將會收到這個 registrationId。

...    componentDidMount() {        JPushModule.addGetRegistrationIdListener((registrationId) => {            console.log("Device register succeed, registrationId " + registrationId);        });    }

　　

清除所有通知

建議在使用者退出前台後調用。

   ...    componentWillUnmount() {        console.log("Will clear all notifications");        JPushModule.clearAllNotifications();    }

　　

設定標籤

example/react-native-android/set_activity.js

  ...    setTag() {        if (this.state.tag !== undefined) {            /*            * 請注意這個介面要傳一個數組過去，這裡只是個簡單的示範            */                  JPushModule.setTags(["VIP", "NOTVIP"], () => {                console.log("Set tag succeed");            }, () => {                console.log("Set tag failed");            });        }    }

　　

設定別名

...    setAlias() {        if (this.state.alias !== undefined) {            JPushModule.setAlias(this.state.alias, () => {                console.log("Set alias succeed");            }, () => {                console.log("Set alias failed");            });        }    }

　　

jpush-react-native 推送功能（Android 篇）