美文网首页React Native学习程序员
jpush-react-native android端集成——

jpush-react-native android端集成——

作者: JsLin_ | 来源:发表于2018-07-06 18:24 被阅读53次

    为什么选用极光?因为这个 jpush-react-native 是极光官网维护的 ,而且关于原生方面配置也不是很多,方便搞前端从事RN的同学使用。
    官网注册 账号https://www.jiguang.cn/,获取 AppKey

    image.png
    自动link配置
    npm install jpush-react-native --save
    rnpm link jpush-react-native
    
    我这里报错了  需要 link jcore-react-native
    Project :app declares a dependency from configuration 'compile' to configuration 'default' which is not declared in the descriptor for project :jcore-react-native.
    

    执行完 link 项目后可能会出现报错,需要手动配置一下 build.gradle 文件。
    如果没有 手动加上


    image.png image.png
    image.png
    在AndroidManifest 添加 
     <meta-data
            android:name="JPUSH_APPKEY"
            android:value="${JPUSH_APPKEY}" />
        <meta-data
            android:name="JPUSH_CHANNEL"
            android:value="${APP_CHANNEL}" />
    

    配置好后 sync 同步 一下项目, jpush-react-native 以及 jcore-react-native 作为 android Library 项目导进来了。
    在app 下的 MainApplication.java 文件,加入 JPushPackage

    import cn.jpush.reactnativejpush.JPushPackage;
    
       @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              .....
                  new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
        //注意 在 MainApplication类下要定义  这两个变量  在下图位置
         private boolean SHUTDOWN_TOAST = false;
         private boolean SHUTDOWN_LOG = false;
    
          );
        }
    
    
    image.png

    在 MainActivity.java下添加如下代码 别忘记导入包
    import cn.jpush.android.api.JPushInterface;

     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);
        }
    
        @Override
        protected void onDestroy() {
            super.onDestroy();
        }
    
    
    

    Android 配置到这里已经完成,然后就是RN 中的使用

    在我们工程的根目录下
    componentDidMount(){
     // 接收自定义消息
            JPushModule.addReceiveCustomMsgListener((message) => {
                console.log("message :" + JSON.stringify(message))
            });
            // 接收推送通知
            JPushModule.addReceiveNotificationListener((message) => {
           //这种情况 是一般 我们app处于运行状态 下会触发
                console.log("接受通知: " + JSON.stringify(message));
            });
            // 打开通知
            JPushModule.addReceiveOpenNotificationListener((map) => {
                console.log("打开通知!");
                //这里的 map.extras  //可选设置的键值对
                //map.alertContent   //推送的消息内容
                //ios   是  alert
                console.log(JSON.stringify(map))
                console.log("map.extra: " + map.extras);
    
                // 在这里 就可以处理 我们的路由跳转了  根据 我们推送的时候 约定好的键值对
        
    
    
    image.png

    这里有个可选项 可以判断我们的路由跳转等


    image.png

    这里我们只是手动发送推送,进行测试,还要服务层配合我们 后台集成推送 主动触发 。

    android效果

    ios端集成待更新

    相关文章

      网友评论

        本文标题:jpush-react-native android端集成——

        本文链接:https://www.haomeiwen.com/subject/iclayftx.html