React-Native集成JPush-react-native及应用设置Tags、Alias（iOS/Android）

最近项目中用到推送功能，且项目是以React-Native框架实现iOS、Android跨平台开发，自然而然就选择了极光实现推送功能，由于以前是iOS开发对Android了解的不很很深，在集成和设置别名等问题上也遇到些坑，现在就把集成步骤及遇到的问题分享出来，仅供大家参考，有什么问题也可以留言一起探讨：

安装

• cd到项目根目录
• 执行 npm install jpush-react-native –save
• npm install jcore-react-native –save ## jpush-react-native 1.4.2 版本以后需要同时安装 jcore-react-native

---

配置

配置包括两个步骤，自动配置和手动操作。

1.自动配置：以下命令均在你的 React Native 项目目录下运行，自动配置后仍需手动配置一部分）

• 执行脚本
  npm run configureJPush yourAppKey yourModuleName
  module name 指的是你 Android 项目中的模块名字(对 iOS 没有影响，不填写的话默认值为 app，会影响到查找 AndroidManifest 问题，
  如果没找到 AndroidManifest，则需要手动修改，参考下面的 AndroidManifest 配置相关说明)
  举个��：
  nam run configureJPush 48f30d0b04d9bc4f5ad7de53 app

• 执行脚本
  react-native link

2.手动配置部分
iOS 手动操作部分 （4步）

• 在React-Native工程中node_modules -> push-react-native -> ios - > RCTJPushModule -> RCTJPushModule.xcodeproj 拖入iOS工程Libraries中并添加：

• 在 iOS 工程中设置 TARGETS-> BUILD Phases -> LinkBinary with Libraries 找到 UserNotifications.framework 把 status 设为 optional

• 在 iOS 工程中如果找不到头文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下路径
  $(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule/RCTJPushModule

• 在 xcode8 之后需要点开推送选项： TARGETS -> Capabilities -> Push Notification 设为 on 状态

---

Android 手动操作部分

• 修改 app 下的 build.gradle 配置：
  

  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。

• 检查一下 dependencies 中有没有添加 jpush-react-native 及 jcore-react-native 这两个依赖。

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 配置，有没有增加 部分。
  

  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>

• 然后重新 sync 一下项目，应该能看到 jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了

• 加入 JPushPackage，有参数！

RN 0.29.0 以下版本

• 打开 app 下的 MainActivity，在 ReactInstanceManager 的 build 方法中加入 JPushPackage：
  

  app/MainActivity.java
  

RN 0.29.0 以上版本

• 打开 app 下的 MainApplication.java 文件，然后加入 JPushPackage,也可以参考官方Demo

    // 设置为 true 将不弹出 toast    private boolean SHUTDOWN_TOAST = false;    // 设置为 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)            );        }    };

到这里Push-react-native就已将集成到iOS和Android工程中了，然后就可以去极光后台发送通知，查看推送消息（注：如果你是Android工程师，在iOS集成后还需将推送证书上传到极光后台认证，认证通过后即可发送推送通知！！！）

上面集成就告一段落了，下面就是在React-Native项目中给iOS和Android 设置Tags和 Alias了：

Note: In Android, you must call initPush first, iOS doesn’t need.

在设置tags和Alias前 Android项目首先需要在MainActivity中 initPush ，iOS不需要操作：

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

然后就可以根据你的逻辑及需求（在登录成功或者程序首页等等）去设置Tags及Alias。

-eg：

 componentDidMount(){        console.log('componentDidMount');        JPushModule.setTags([this.state.tag], () => {                // Alert.alert('成功', 'tags 成功',[{text: 'OK'}])；                console.log('success set tag');            }, () => {                // Alert.alert('失败','设置alias 失败',[{text:'fail'}]);                console.log('fail set tag');            });        JPushModule.setAlias('James', () => {            Alert.alert('成功', '设置alias 成功',[{text: 'OK'}]);            console.log('成功');        }, () => {            Alert.alert('失败','设置alias 失败',[{text:'fail'}]);            console.log('失败');        });     }

注： 在设置Tags时要传一个数组过去！！！

本编文章以同步到博客：传送门