推送已經(jīng)是是手機(jī)應(yīng)用的基本功能脉幢,如果自己實(shí)現(xiàn)一套推送系統(tǒng)費(fèi)時(shí)費(fèi)力爸舒,所有一般我們會使用第三方的推送服務(wù)浇雹,這里我使用 極光推送 作為集成推送的例子她紫,因?yàn)橛鞋F(xiàn)成的 react native 插件 jpush-react-native 可以使用硅堆。
前置準(zhǔn)備工作
安裝軟件
- react native (0.41.2)
- npm (V3.10.3)
- xcode (V8.2.1)
創(chuàng)建工程
- 在 Apple developer 上創(chuàng)建應(yīng)用
- 并且給應(yīng)用配置推送功能,創(chuàng)建推送證書
- 到 極光官網(wǎng) 上創(chuàng)建自己的應(yīng)用贿讹,并上傳證書
- 創(chuàng)建 React-Native 工程渐逃,修改 bundle identifier ,保證和在 Apple developer 上創(chuàng)建的應(yīng)用一直民褂。(Project -> Target -> General -> bundle identifier)
- xcode 8 版本的話還需要在 (Project -> Target -> Capabilities ) 吧Push Notification 選項(xiàng)點(diǎn)開
第一茄菊、二疯潭、三 步驟的詳細(xì)介紹可以觀看 官方集成視頻, 這里就不在重復(fù)面殖。
(如果已有工程竖哩,則只需要完成第二和第三項(xiàng)步驟)
集成 jpush-react-native
配置工程
在完成上面的準(zhǔn)備工作后,我們就可以正式開始插件的集成脊僚,這里會解釋每個(gè)步驟背后都做了哪些操作相叁。
按照官方的集成說明安裝 jpush-react-native (這里使用最新版本 V1.5.0)
- 安裝 jpush-react-native 插件
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" 依賴。 由于極光開發(fā)者服務(wù) SDK 采用了模塊化的使用模式辽幌,即一個(gè)核心(JCore)+N種服務(wù)(JPush增淹,JAnalytics,...)的使用方式乌企,所以把公共核心代碼分離出來虑润,這樣在使用極光推送多種服務(wù)的時(shí)候不會出現(xiàn)沖突。
- 鏈接工程
react-native link
這個(gè)步驟逛犹,其實(shí)是吧 jpush plugin 工程添加到 自己的項(xiàng)目工程里面端辱,可以看到 Libraries 目錄多了一個(gè) RCTJPushModule.xcodeproj 工程文件,如下圖所示
同時(shí)這個(gè)步驟還會自動把 JPush 所依賴的庫自動添加到工程中虽画,可以看到
TARGETS -> Build phases -> Link Binary With Libraries 多了幾個(gè)系統(tǒng)庫舞蔽,如下圖所示
這些步驟都是自動完成的,不需要額外的操作码撰。
然后把 其中一個(gè)庫 UserNotification.framework status 設(shè)為 Optional
添加代碼
1. 自動添加代碼
jpush-react-native 插件提供了自動配置腳本
npm run configureJPush <yourAppKey> <yourModuleName>
把 <yourAppKey> 換成自己的 AppKey (在極光官網(wǎng)上創(chuàng)建應(yīng)用可以獲得一個(gè) Appkey)
<yourModuleName> 指的是你 Android 項(xiàng)目中的模塊名字(對 iOS 沒有影響,不填寫的話默認(rèn)值為 app脖岛,會影響到查找 AndroidManifest 問題朵栖。
這個(gè)腳本會自動吧極光推送的代碼插入到 Appdelegate.m 中。
到這一步 jpush-react-native 插件已經(jīng)集成完畢柴梆。
我們試著這編譯自己工程陨溅,如果出現(xiàn)找不到頭文件的情況則需要在 iOS 工程中如果找不到頭文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下如路徑
$(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule
2. 手動添加代碼
手動添加代碼部分 jpusn-react-native ReadMe 已經(jīng)說得很清楚了,這里就不再重復(fù)