Push is already a basic function of mobile applications. If it is time-consuming and laborious to implement a push system by yourself, we generally use third-party push services. Here I use Jiguang Push as an example of integrated push, because there is a ready-made react native plugin jpush -react-native can be used.
prep work
install software
- react native (0.41.2)
- above sea level (V3.10.3)
- xcode (V8.2.1)
Create project
- Create an app on Apple developer
- And configure the push function for the application and create a push certificate
- Go to Jiguang's official website to create your own application and upload the certificate
- Create a React-Native project, modify the bundle identifier, and ensure that it is the same as the application created on Apple developer. (Project -> Target -> General -> bundle identifier)
- For the xcode 8 version, you need to click on the Push Notification option in (Project -> Target -> Capabilities)
for the detailed introduction of the first, second and third steps to watch the official integration video , which will not be repeated here.
(If there is an existing project, only the second and third steps need to be completed)
Integrate jpush-react-native
configuration project
After completing the above preparations, we can officially start the integration of the plugin. Here we will explain what is done behind each step.
Install jpush-react-native according to the official integration instructions (the latest version V1.5.0 is used here)
-
Install jpush-react-native plugin
npm install jpush-react-native --save安装完后可以看到 package.json 的 dependencies 字段多了 "jpush-react-native" 依赖
-
然后安装 jcore-react-native 插件
npm install jcore-react-native --save安装完后可以看到 package.json 的 dependencies 字段多了 "jcore-react-native" 依赖。 由于极光开发者服务 SDK 采用了模块化的使用模式，即一个核心（JCore）+N种服务（JPush，JAnalytics，...）的使用方式，所以把公共核心代码分离出来，这样在使用极光推送多种服务的时候不会出现冲突。
-
链接工程
react-native link这个步骤，其实是吧 jpush plugin 工程添加到 自己的项目工程里面，可以看到 Libraries 目录多了一个 RCTJPushModule.xcodeproj 工程文件，如下图所示
同时这个步骤还会自动把 JPush 所依赖的库自动添加到工程中，可以看到
TARGETS -> Build phases -> Link Binary With Libraries 多了几个系统库，如下图所示
这些步骤都是自动完成的，不需要额外的操作。
添加代码
1. 自动添加代码
jpush-react-native 插件提供了自动配置脚本
npm run configureJPush <yourAppKey> <yourModuleName>把 <yourAppKey> 换成自己的 AppKey (在极光官网上创建应用可以获得一个 Appkey)
<yourModuleName> 指的是你 Android 项目中的模块名字(对 iOS 没有影响，不填写的话默认值为 app，会影响到查找 AndroidManifest 问题。
这个脚本会自动吧极光推送的代码插入到 Appdelegate.m 中。
到这一步 jpush-react-native 插件已经集成完毕。
我们试着这编译自己工程，如果出现找不到头文件的情况则需要在 iOS 工程中如果找不到头文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下如路径
$(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule/RCTJPushModule2. 手动添加代码
手动添加代码部分 jpusn-react-native ReadMe 已经说得很清楚了,这里就不再重复