ReactNative集成JPush笔记安装Android配置修改app下的build.gradle配置（路径为：and

本文由我们团队的陈嘉辉总结

安装

yarn add jpush-react-native jcore-react-native --save

Android配置

修改app下的build.gradle配置（路径为：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
}

注：andorid.defaultConfig.applicationId的值就是你在极光官网配置Android应用所要填的包名

修改android下的settings.gradle配置（路径为： `android/settings.gradle）

rootProject.name = 'LeaningReactNative'

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

修改AndroidManifest配置（路径为：android/app/src/main/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>

打开Android Studio import当前ReactNative应用（选择项目下的android文件夹即可），这时候Android Studio会自动sync你import进来的项目，完成之后你会看到jcore-react-native和jpush-react-native作为一个android Library项目导进来了

打开MainApplication.java文件（路径为：android/app/src/main/java/com/你的项目名/MainApplication.java），添加JPushPackage

    // 设置为 true 将不弹出 toast
    private boolean SHUTDOWN_TOAST = false;
    // 设置为 true 将不打印 log
    private boolean SHUTDOWN_LOG = false;    

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG) // 添加的JPushPackage对象
      );
    }

打开MainActivity.java文件（路径为：android/app/src/main/java/com/你的项目名/MainApplication.java）添加一些生命周期函数

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "LeaningReactNative";
    }

    @Override
    protected  void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        JPushInterface.onPause(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使用

绑定监听

在需要绑定推送消息接收监听的组件内的componentDidMount组件挂载完成函数内来绑定监听，在componentWillUnmount组件将要被卸载函数内来移除监听。（建议大家将此类操作放到根组件中进行）

import JPushModule from 'jpush-react-native'
...
// 组件被装载完成时
  componentDidMount () {

    // 新版本必需写回调函数
    // JPushModule.notifyJSDidLoad();
    JPushModule.notifyJSDidLoad((resultCode) => {
      console.warn(`notifyJSDidLoad:${resultCode}`)
    })

    // 接收自定义消息
    JPushModule.addReceiveCustomMsgListener((message) => {
      console.warn(`ReceiveCustomMsg:${message}`)
    })

    // 接收推送消息
    JPushModule.addReceiveNotificationListener((message) => {
      console.warn(`ReceiveNotification:${message}`)
    })

    // 打开通知
    JPushModule.addReceiveOpenNotificationListener((map) => {
      console.warn(`OpenNotification:${map}`)
    })
  }

  // 组件将要被卸载
  componentWillUnmount () {
    JPushModule.removeReceiveCustomMsgListener()
    JPushModule.removeReceiveNotificationListener()
  }

设置Alias或Tag

Tag标签，用来标明一类用户，当要对特定一类用户进行推送时，需要将这些用户设置上Tag标签（例如：推送消息给性别为男的用户，则在用户登录的时候取出该用户的性别进行绑定）

Alias别名，用来表明单个用户，当要对某一个用户进行推送时，需要给这个用户设置上Alias别名，别名是不能重复的，可以将别名设置为手机号等能唯一识别用户的标记

import JPushModule from 'jpush-react-native'
...
// setAlias有两个参数，第一个是你要推送的别名，要注册到极光的，第二个是设置结果的回调
JPushModule.setAlias('你要设置为Alias', (success, error) => {
    if (error) {
        console.warn('Alias设置失败')
    } else {
        console.warn('Alias设置成功')
    }
})
// setTags有两个参数，第一个是你要推送的标签数组，要注册到极光的，第二个是设置结果的回调
JPushModule.setTags(['Tags1', 'Tags2'], (success, error) => {
    if (error) {
        console.warn('Tags设置失败')
    } else {
        console.warn('Tags设置成功')
    }
})

参考

jpush-react-native文档

博客:react native极光推送全程教程android和ios

博客:React Native 集成极光推送 jpush-react-native