用 jpush-react-native 插件快速集成推送功能(Android 篇)

知是行的主意,行是知的功夫。这篇文章主要讲述用 jpush-react-native 插件快速集成推送功能(Android 篇)相关的知识,希望能为你提供帮助。
概述jpush-react-native  是极光推送官方开发的 React Native 版本插件,可以快速集成推送功能。现在最新版本的 JPush SDK 分离了 JPush 及 JCore,让开发者可以分开集成 JMessage 及 JPush(以前 JMessage 包含了 JPush)。下面就来具体说一下如何快速集成以及使用 jpush-react-native 插件。
安装打开终端,进入项目文件夹,执行以下命令:

npm  install  jcore-react-native  --save npm  install  jpush-react-native  --savenpm  run  configureJPush  < yourAppKey>   < yourModuleName> //module  name  指的是你  android  项目中的模块名字(对  ios  没有影响,不填写的话默认值为  app,会影响到查找  AndroidManifest  问题, //如果没找到  AndroidManifest,则需要手动修改,参考下面的  AndroidManifest  配置相关说明) //举个例子: npm  run  configureJPush  d4ee2375846bc30fa51334f5  appreact-native  link

执行完 link 项目后可能会出现报错,这没关系,需要手动配置一下 build.gradle 文件。在 Android Studio 中打开你的项目,然后找到 app 或者你自己定义的需要集成 jpush-react-native 的模块,打开此模块下的 build.gradle 文件,做以下改动:
app/build.gradle
android  {         ...         defaultConfig  {                 applicationId  "com.pushdemo"  //  此处改成你在极光官网上申请应用时填写的包名                 ...                 manifestPlaceholders  =  [                                 JPUSH_APPKEY:  "d4ee2375846bc30fa51334f5",      //在此替换你的APPKey                                 APP_CHANNEL:  "developer-default"                //应用渠道号                 ]         } }

检查一下在 dependencies 中有没有加入 jpush-react-native 以及 jcore-react-native 这两个依赖,如果没有,则需要加上:
dependencies  {         ...         compile  project(‘:jpush-react-native‘)         compile  project(‘:jcore-react-native‘)         ... }

接下来打开项目的 settings.gradle,看看有没有包含 jpush-react-native 以及 jcore-react-native,如果没有,则需要加上:
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‘)

做完以上步骤,这时可以同步(sync)一下项目,然后应该可以看到 jpush-react-native 以及 jcore-react-native 作为 Library 项目导进来了。
将react native项目导入android studio方法: File--> New--> Import Project--> 选择react  native项目下的android
用 jpush-react-native 插件快速集成推送功能(Android 篇)

文章图片

接下来打开模块的 MainApplication.java 文件,加入 JPushPackage:
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)                         );                 }         };

然后在 MainActivity 中加入一些初始化代码即可:
app/src.../MainActivity.java
import  android.os.Bundle; import  cn.jpush.android.api.JPushInterface; 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);         } }

这样就完成了所有的配置。接下来就可以在 JS 中调用插件提供的 API 了。
使用收到推送添加了此事件后,在收到推送时将会触发此事件。
example/react-native-android/push_activity.js
... import  JPushModule  from  ‘jpush-react-native‘; ... export  default  class  PushActivity  extends  React.Component  {         componentDidMount()  {                 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);                 }); }

高级应用修改 JPushModule 中收到点击通知的事件,可以自定义用户点击通知后跳转的界面(现在默认是直接启动应用),只需要修改一点点原生的代码:
jpush-react-native/src.../JPushModule.java
public  static  class  JPushReceiver  extends  BroadcastReceiver  {                public  JPushReceiver()  {                                HeadlessJsTaskService.acquireWakeLockNow(mRAC);                 }                        @Override                public  void  onReceive(Context  context,  Intent  data)  {         ...         }  else  if  (JPushInterface.ACTION_NOTIFICATION_OPENED.equals(data.getAction()))  {                        Logger.d(TAG,  "用户点击打开了通知");                 Intent  intent  =  new  Intent();                 intent.setClassName(context.getPackageName(),  context.getPackageName()  +  ".MainActivity");                 intent.putExtras(bundle);                 intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK  |  Intent.FLAG_ACTIVITY_CLEAR_TOP);                 //  如果需要跳转到指定的界面,那么需要同时启动  MainActivity  及指定界面(SecondActivity):                 //  If  you  need  to  open  appointed  Activity,  you  need  to  start  MainActivity  and                 //  appointed  Activity  at  the  same  time.                 Intent  detailIntent  =  new  Intent();                 detailIntent.setClassName(context.getPackageName(),  context.getPackageName()  +  ".SecondActivity");                 detailIntent.putExtras(bundle);                 Intent[]  intents  =  {intent,  detailIntent};                 //  同时启动  MainActivity  以及  SecondActivity                 context.startActivities(intents);                 //  或者回调  JS  的某个方法         } }...  @ReactMethod   public  void  finishActivity()  {           Activity  activity  =  getCurrentActivity();           if  (activity  !=  null)  {                   activity.finish();           }   }

如果修改了此处跳转的界面,需要在 Native 中声明一个 Activity,如 demo 中的 SecondActivity,而 SecondActivity 的界面仍然用 JS 来渲染。只需要改动一下 SecondActivity,让它继承自 ReactActivity 即可:
example/android/app/src.../SecondActivity.java
public  class  SecondActivity  extends  ReactActivity  {        @Override         protected  String  getMainComponentName()  {                 return  "SecondActivity";         }}

然后使用上面返回的字符串注册一个 Component 即可:
example/react-native-android/second.js
‘use  strict‘; import  React  from  ‘react‘; import  ReactNative  from  ‘react-native‘; const  {     AppRegistry,     View,     Text,     TouchableHighlight,     StyleSheet,     NativeModules, }  =  ReactNative; var  JPushModule  =  NativeModules.JPushModule; export  default  class  second  extends  React.Component  {     constructor(props)  {         super(props);     }    onBackPress  =  ()  =>   {         let  navigator  =  this.props.navigator;         if  (navigator  !=  undefined)  {             this.props.navigator.pop();         }  else  {             console.log("finishing  second  activity");             JPushModule.finishActivity();         }     }    onButtonPress  =  ()  =>   {         console.log("will  jump  to  setting  page");         let  navigator  =  this.props.navigator;         if  (navigator  !=  undefined)  {             this.props.navigator.push({                 name:  "setActivity"             });         }  else  {        }    }    render()  {         return  (             < View>                 < TouchableHighlight                     style={styles.backBtn}                     underlayColor  =  ‘#e4083f‘                     activeOpacity  =  {0.5}                     onPress  =  {this.onBackPress}>                     < Text>                         Back                     < /Text>                 < /TouchableHighlight>                 < Text                     style={styles.welcome}>                       Welcome  !                  < /Text>                   < TouchableHighlight  underlayColor  =  ‘#e4083f‘                     activeOpacity  =  {0.5}                     style  =  {styles.btnStyle}                     onPress  =  {this.onButtonPress}>                     < Text  style={styles.btnTextStyle}>                         Jump  To  Setting  page!                     < /Text>                   < /TouchableHighlight>                 < /View>         );     } }var  styles  =  StyleSheet.create({     backBtn:  {         padding:  10,         marginTop:  10,         marginLeft:  10,         borderWidth:  1,         borderColor:  ‘#3e83d7‘,         backgroundColor:  ‘#3e83d7‘,         borderRadius:  8,         alignSelf:  ‘flex-start‘     },     welcome:  {         textAlign:  ‘center‘,         margin:  10,     },     btnStyle:  {         marginTop:  10,         borderWidth:  1,         borderColor:  ‘#3e83d7‘,         borderRadius:  8,         backgroundColor:  ‘#3e83d7‘,         alignSelf:  ‘center‘,         justifyContent:  ‘center‘     },     btnTextStyle:  {         textAlign:  ‘center‘,         fontSize:  25,         color:  ‘#ffffff‘     }, }); AppRegistry.registerComponent(‘SecondActivity‘,  ()  =>   second);

这样就完成了用户点击通知后的自定义跳转界面。
接收自定义消息在用户收到自定义消息后触发。
example/react-native-android/push_activity.js
  ...         componentDidMount()  {                 JPushModule.addReceiveCustomMsgListener((map)  =>   {                         this.setState({                                 pushMsg:  map.message                         });                         console.log("extras:  "  +  map.extras);         }); ...

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

以上就是插件提供的主要接口的示例。总的来说,配置和使用都比较简单,适合开发者快速集成推送功能。


【用 jpush-react-native 插件快速集成推送功能(Android 篇)】本文出自 “风之痕_雪虎” 博客,请务必保留此出处http://snowtiger.blog.51cto.com/12931578/1949484

    推荐阅读