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

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时要传一个数组过去！！！

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