知是行的主意,行是知的功夫。这篇文章主要讲述用 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

文章图片

接下来打开模块的 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

推荐阅读

• 

  助学贷款贷款年限是什么意思
• 

  管家婆CRM
• 

  云顶之弈永恩带什么装备 云顶之弈10.25永恩阵容搭配攻略
• 

  你曾经学过的革命英烈和英雄人物还记得多少？
• 

  板栗糖尿病能吃吗 糖尿病患者能吃板栗吗
• 

  鲜虾仁怎么炒好吃又嫩
• 

  怎样清洗隐形内衣呢小妙招 怎样清洗隐形内衣呢
• 

  教高中好还是教小学好
• 

  编程it，什么是it编程
• 

  佳能5d微距镜头 怎样用佳能5d相机拍微距物品
• 

  哪些人不能喝洋葱蒸水
• 

  绞股蓝适合哪些人吃
• 

  芦笋皮有什么作用？
• 

  万科彩虹汇 扬州万科
• 

  月经|15岁女孩月经一直没有来，因为是“石女”！究竟是什么情况？
• 

  1314情话 数字情话表白1314*精选60句*
• 

  迅雷看看播放器中保存当前画面的详细操作教程是什么 迅雷看看播放器中保存当前画面的详细操作教程
• 

  Win8系统宽带连接出错623的处理办法
• 

  安徽省科技馆开放时间和门票 安徽省科技馆开放时间
• 

  香菇排骨汤的做法大全，香菇排骨汤的做法大全视频

• Linux,maven,redis,android,java,yum,ant部署相关命令
• Android与WebView的插件管理机制
• 安卓源代码----安卓系统启动过程（初次研究源代码，表述不当还请见谅）
• Android - 监听Activity点击无效
• App反编译二次打包常见问题处理
• 派派农场游戏开发 派派农场系统APP
• React-native初体验（安卓篇）
• 使用express， create-react-app， mongodb搭建react模拟数据开发环境
• Appium环境搭建（MAC版）