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

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