React Native集成极光推送

举报
G-washington 发表于 2019/10/11 21:55:27 2019/10/11
【摘要】 推送作为手机应用的基本功能,是手机应用的重要部分,如果自己实现一套推送系统费时费力,所以大部分的应用都会选择使用第三方的推送服务,如极光推送。下面就以React Native项目集成jpush-react-native 来讲讲如何集成极光的推送服务。

推送作为手机应用的基本功能,是手机应用的重要部分,如果自己实现一套推送系统费时费力,所以大部分的应用都会选择使用第三方的推送服务,如极光推送。下面就以React Native项目集成jpush-react-native 来讲讲如何集成极光的推送服务。

JPush账号

首先,登录极光官网系统,如果还没有账号可以注册一个,登录成功我们就可以创建和管理我们的应用了。 

image.png

集成推送

安装JPush库

由于极光开发者服务 SDK 采用了模块化的使用模式,即一个核心(JCore)+N种服务(JPush,JAnalytics,…)的使用方式,所以把公共核心代码分离出来,这样在使用极光推送多种服务的时候不会出现冲突。 
打开终端,进入项目文件夹,执行以下命令(获取直接在WebStrom的Terminal这输入命名)。

image.png

完成后需要执行link命令,将依赖通知给原生的依赖,命令如下:

image.png

或者使用下面的命令:

image.png

Link命令其实就是把jpush plugin工程添加到原生的项目工程里面,Android使用Android Studio、ios使用Xcode打开原生的项目部分可以看到,可以看到原生项目的 Libraries目录多了Jpush的依赖文件。

手动配置

Android配置

搞过原生集成的同学都知道,添加完依赖后,还需要手动的配置一些账号信息。使用Android Studio打开项目,然后找到 app 或者你自己定义的需要集成 jpush-react-native 的模块,打开此模块下的build.gradle文件。当然,默认情况下这些配置使用“react-native link”命令会自动添加这些命令。

1,打开Android目录的“project/android/app/build.gradle”文件,然后配置如下信息。

image.png

2,打开Android原生目录下的settings.gradle 文件,检查是否添加了如下的配置。

image.png

3,打开 app目录下的 AndroidManifest 配置文件,查看是否增加 <meta-data> 部分。

image.png

4,完成上面的配置后,需要修改项目的MainActivity和MainApplication相关的代码。 
打开 app下的 MainApplication.java 文件,然后加入JPushPackage。例如:

image.png

关于这部分的内容可以可以参考MainApplication.java配置。 
然后在MainActivity.java中加入一些初始化配置。

image.png

需要注意,0.29.0版本之前与之后的写法,读者可以自行查看MainActivity初始化配置。到此,就完成Jpush的所有配置,接下来就可以在 JS 中调用插件提供的API函数了。

Android环境Push实例

通过上面的步骤之后,现在我们就可以发送推送了,,首先新建一条推送信息,如下图。 

image.png

当我们发送该消息后,就可以在手机端看到相关的信息,如下图。 

                                                image.png

如果我们需要在调用jpush的API函数,可以参考下面的实现。

image.png

iOS配置

使用Xcode打开React Native的iOS原生的项目,可以看到Libraries目录下有一个RCTJPushModule.xcodeproj文件,如下图。 

                                            image.png

然后,依次点击TARGETS -> Build phases -> Link Binary With Libraries打开依赖库配置,可以看到如下图所示的系统库依赖。 

这里写图片描述

注,当使用命令“react native link”时,上面的这些配置都是系统自动完成的。

1,使用Xcode打开iOS项目,依次选择TARGETS-> BUILD Phases -> LinkBinary with Libraries,然后把 “UserNotification.framework status”设为Optional。 
2,在 iOS 工程中如果找不到头文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下路径信息。

image.png

这里写图片描述

注意:在 xcode8 之后需要点开推送选项: TARGETS -> Capabilities -> Push Notification 设为【on】状态。如下图: 

这里写图片描述

接下来,我们需要在极光开发者中心配置相关的证书信息,如下图。 

这里写图片描述


关于证书相关的内容,可以访问极光ios证书设置指南 
此处我只导入了测试环境的证书,导入完成后如下图。 
这里写图片描述

到此我们就可以在测试环境中使用极光进行推送了。 

这里写图片描述

本文转载自异步社区

原文链接:https://www.epubit.com/articleDetails?id=Nb23b909b-5657-4bd7-a947-333d5e2f75e8 

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。