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

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
 

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