V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jpush
V2EX  ›  推广

React-Native 工程添加推送功能 ( iOS 篇)

  •  
  •   jpush · 2017-04-24 11:35:10 +08:00 · 1318 次点击
    这是一个创建于 2753 天前的主题,其中的信息可能已经有所发展或是发生改变。

    推送已经是是手机应用的基本功能,如果自己实现一套推送系统费时费力,所有一般我们会使用第三方的推送服务,这里我使用「极光推送」作为集成推送的例子,因为有现成的 react native 插件 jpush-react-native 可以使用。

    前置准备工作

    安装软件

    • react native (0.41.2)
    • npm (V3.10.3)
    • xcode (V8.2.1)

    创建工程

    • 在 Apple developer 上创建应用
    • 并且给应用配置推送功能,创建推送证书
    • 极光官网 上创建自己的应用,并上传证书
    • 创建 React-Native 工程,修改 bundle identifier ,保证和在 Apple developer 上创建的应用一直。(Project -> Target -> General -> bundle identifier)
    • xcode 8 版本的话还需要在 (Project -> Target -> Capabilities ) 吧 Push Notification 选项点开 第一、二、三 步骤的详细介绍可以观看 官方集成视频, 这里就不在重复。 (如果已有工程,则只需要完成第二和第三项步骤)

    集成 jpush-react-native

    配置工程

    在完成上面的准备工作后,我们就可以正式开始插件的集成,这里会解释每个步骤背后都做了哪些操作。 按照官方的集成说明安装 jpush-react-native (这里使用最新版本 V1.5.0)

    1. 安装 jpush-react-native 插件

    npm install jpush-react-native --save
    

    安装完后可以看到 package.json 的 dependencies 字段多了 "jpush-react-native" 依赖

    2. 然后安装 jcore-react-native 插件

    npm install jcore-react-native --save
    

    安装完后可以看到 package.json 的 dependencies 字段多了 "jcore-react-native" 依赖。 由于极光开发者服务 SDK 采用了模块化的使用模式,即一个核心( JCore )+N 种服务( JPush , JAnalytics ,...)的使用方式,所以把公共核心代码分离出来,这样在使用极光推送多种服务的时候不会出现冲突。

    3. 链接工程

    react-native link
    

    这个步骤,其实是吧 jpush plugin 工程添加到 自己的项目工程里面,可以看到 Libraries 目录多了一个 RCTJPushModule.xcodeproj 工程文件,如下图所示

    同时这个步骤还会自动把 JPush 所依赖的库自动添加到工程中,可以看到 TARGETS -> Build phases -> Link Binary With Libraries 多了几个系统库,如下图所示

    这些步骤都是自动完成的,不需要额外的操作。 然后把 其中一个库 UserNotification.framework status 设为 Optional

    添加代码

    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/RCTJPushModule
    

    2. 手动添加代码

    手动添加代码部分 jpusn-react-native ReadMe 已经说得很清楚了,这里就不再重复~


    作者: HuminiOS - 极光( JPush 为极光团队账号,欢迎关注)

    原文:React-Native 工程添加推送功能 ( iOS 篇)

    知乎专栏:极光日报

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5590 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 06:00 · PVG 14:00 · LAX 22:00 · JFK 01:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.