ReactNative集成個(gè)推消息推送過(guò)程詳解
前言
最近項(xiàng)目中需要集成消息推送功能，在以往的項(xiàng)目中都是使用的極光推送方案,現(xiàn)在的公司安卓端使用的是個(gè)推消息推送，所以計(jì)劃在本次使用RN重構(gòu)項(xiàng)目的過(guò)程中也采用了個(gè)推方案， 即個(gè)推官方提供的推送SDK React Native 插件（支持 Android & iOS）react-native-getui。
項(xiàng)目ReactNative版本號(hào)：0.63.4
集成
1. 自動(dòng)添加依賴(lài)
yarn add react-native-getui cd ios pod install
2.手動(dòng)添加配置
安卓部分
1.在android/build.gradle中添加maven地址中添加配置
maven {
url "http://mvn.gt.igexin.com/nexus/content/repositories/releases/"
}
2.android目錄下，在app/build.gradle中添加如下配置
dependencies中添加依賴(lài)
implementation project(':react-native-getui')3.android--> defaultConfig中添加如下配置
ndk {
abiFilters "armeabi", "armeabi-v7a", "x86_64", "x86"
}
// 配置個(gè)推的三個(gè)參數(shù)
manifestPlaceholders = [
GETUI_APP_ID : "your app id",
GETUI_APP_KEY : "your app key",
GETUI_APP_SECRET : "your app secret"
]注意：yourAppId/yourAppKey/yourAppSecret 需要去個(gè)推官網(wǎng) 注冊(cè)后，在后臺(tái)配置獲取。
4.在android/app/AndroidManifest.xml 的<application>標(biāo)簽內(nèi)添加meta-data
<!-- 配置個(gè)推的三個(gè)參數(shù) -->
<meta-data android:name="PUSH_APPID" android:value="${GETUI_APP_ID}" tools:replace="android:value"/>
<meta-data android:name="PUSH_APPKEY" android:value="${GETUI_APP_KEY}" tools:replace="android:value"/>
<meta-data android:name="PUSH_APPSECRET" android:value="${GETUI_APP_SECRET}" tools:replace="android:value"/>
<meta-data android:name="MEIZUPUSH_APPID" android:value="" tools:replace="android:value"/>
<meta-data android:name="MEIZUPUSH_APPKEY" android:value="" tools:replace="android:value"/>
<meta-data android:name="MIPUSH_APPID" android:value="" tools:replace="android:value"/>
<meta-data android:name="MIPUSH_APPKEY" android:value="" tools:replace="android:value"/>
<meta-data android:name="OPPOPUSH_APPKEY" android:value="" tools:replace="android:value"/>
<meta-data android:name="OPPOPUSH_APPSECRET" android:value="" tools:replace="android:value"/>
<meta-data android:name="com.vivo.push.app_id" android:value="" tools:replace="android:value"/>
<meta-data android:name="com.vivo.push.api_key" android:value="" tools:replace="android:value"/>
<meta-data android:name="com.huawei.hms.client.appid" android:value="" tools:replace="android:value"/>5.在MainApplication.java的文件里添加以下信息
import com.getui.reactnativegetui.GetuiModule;
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
// 初始化個(gè)推模塊
GetuiModule.initPush(this);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
}ReactNative項(xiàng)目中JS調(diào)用代碼
class GetuiPush extends Component{
componentDidMount() {
this._initGetuiPushListener()
}
_initGetuiPushListener = () => {
//訂閱消息通知
this.receiveRemoteNotificationSub = NativeAppEventEmitter.addListener(
'receiveRemoteNotification',
(notification) => {
switch (notification.type) {
case "cid":
console.log('初始化獲取到cid', JSON.stringify(notification))
break;
case 'payload':
console.log('payload 消息通知', JSON.stringify(notification))
break
case 'cmd':
console.log('cmd 消息通知', 'cmd action = ' + notification.cmd)
break
case 'notificationArrived':
console.log('notificationArrived 通知到達(dá)', JSON.stringify(notification))
break
case 'notificationClicked':
console.log('notificationArrived 通知點(diǎn)擊', JSON.stringify(notification))
break
default:
break
}
}
);
}
componentWillUnmount() {
// 移除消息監(jiān)聽(tīng)
this.receiveRemoteNotificationSub &&
this.receiveRemoteNotificationSub.remove();
}
render() {
return null;
}
}遇到的問(wèn)題
按照以上的步驟就可以正常通過(guò)個(gè)推官網(wǎng)進(jìn)行推送消息到手機(jī)上了，但是。。。
凡是就怕但是，哈哈。 在進(jìn)行公司項(xiàng)目的業(yè)務(wù)推送的時(shí)候，手機(jī)通知欄竟然沒(méi)有任何反應(yīng)，沒(méi)有推送消息文字和聲音提示，這就很難受了。
接下來(lái)，我開(kāi)始檢查手機(jī)的通知設(shè)置以及和同事進(jìn)行測(cè)試，發(fā)現(xiàn)他的安卓原生項(xiàng)目是可以正常收到推送的，問(wèn)了后臺(tái)同事說(shuō)也沒(méi)有特別的設(shè)置，這。。。
后來(lái)看了同事的Android代碼，發(fā)現(xiàn)這邊竟然是使用的個(gè)推的透?jìng)飨?，然后進(jìn)行的處理。 oh my god!
見(jiàn)招拆招，拜讀了個(gè)推的官網(wǎng)，是這樣介紹透?jìng)?自定義消息)和普通消息的區(qū)別的。
通知消息和透?jìng)?/h3>
- 通知消息：
通知展示時(shí)效果：響鈴、震動(dòng)、通知是否可清除，下拉大圖、長(zhǎng)文本。
通知點(diǎn)擊后效果：打開(kāi)應(yīng)用首頁(yè)、打開(kāi)應(yīng)用內(nèi)指定頁(yè)面、打開(kāi)瀏覽器指定網(wǎng)頁(yè)。
- 透?jìng)飨ⅲ?/li>
即自定義消息，效果由開(kāi)發(fā)者自行管理，個(gè)推只負(fù)責(zé)消息傳遞，不做任何處理，默認(rèn)不會(huì)在通知欄中展示，開(kāi)發(fā)者需自行處理展示方式或后續(xù)動(dòng)作。
看了以上說(shuō)明之后大體明白了， 又和后臺(tái)同事溝通了一下，確實(shí)采用的透?jìng)鞣绞?，這意味著通過(guò)透?jìng)鞣绞竭M(jìn)行消息推送，如果需要進(jìn)行用戶(hù)提示的話，就需要開(kāi)發(fā)者自行實(shí)現(xiàn)了。
ReactNative處理透?jìng)飨?/h3>
如果需要透?jìng)餍畔⑼ㄟ^(guò)通知欄提醒用戶(hù)的話，就相當(dāng)于本地進(jìn)行消息推送了。這里可以通過(guò)實(shí)現(xiàn)原生代碼的方式進(jìn)行處理，也可以使用一些第三方進(jìn)行處理，這里推薦react-native-push-notification進(jìn)行處理。
在使用這個(gè)庫(kù)的時(shí)候，可能會(huì)遇到如下錯(cuò)誤提示:
只需要進(jìn)行如下設(shè)置， 將requestPermissions設(shè)置為false：
/** * (optional) default: true * - Specified if permissions (ios) and token (android and ios) will requested or not, * - if not, you must call PushNotificationsHandler.requestPermissions() later * - if you are not using remote notification or do not have Firebase installed, use this: * requestPermissions: Platform.OS === 'ios' */ requestPermissions: false,
以上就是ReactNative集成個(gè)推消息推送過(guò)程詳解的詳細(xì)內(nèi)容，更多關(guān)于ReactNative集成個(gè)推消息推送的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react中代碼塊輸出,代碼高亮顯示,帶行號(hào),能復(fù)制的問(wèn)題
這篇文章主要介紹了react中代碼塊輸出，代碼高亮顯示，帶行號(hào)，能復(fù)制的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
react-router-dom?V6的配置使用實(shí)踐
本文主要介紹了react-router-dom?V6的配置使用實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
為react組件庫(kù)添加typescript類(lèi)型提示的方法
這篇文章主要介紹了為react組件庫(kù)添加typescript類(lèi)型提示，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
對(duì)于剛學(xué)前端的大家來(lái)說(shuō),對(duì)于React中的事件監(jiān)聽(tīng)寫(xiě)法有所疑問(wèn)很正常，特別是React中箭頭函數(shù)使用這塊，下面這篇文章主要給大家深入的講解了關(guān)于React中何時(shí)使用箭頭函數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
React中style的使用及注意事項(xiàng)(推薦)
React中style的使用和直接在HTML中使用有些不同，第一，React中必須是style="opacity:{this.state.opacity};"這種寫(xiě)法，第二如果設(shè)置多個(gè)style格式如下，多個(gè)style中間使用逗號(hào)分割，這篇文章主要介紹了React中style的使用注意事項(xiàng),需要的朋友可以參考下2023-02-02
jenkins分環(huán)境部署vue/react項(xiàng)目的方法步驟
這篇文章主要介紹了jenkins分環(huán)境部署vue/react項(xiàng)目的方法，本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02
React的組件協(xié)同使用實(shí)現(xiàn)方式
這篇文章主要介紹了React的組件協(xié)同使用,文中給大家提到在React開(kāi)發(fā)中，有哪些場(chǎng)景的組件協(xié)同？又如何去實(shí)現(xiàn)組件的協(xié)同使用呢？本文都給大家提到，感興趣的朋友跟隨小編一起看看吧2021-09-09
react組件中的constructor和super知識(shí)點(diǎn)整理
這篇文章主要介紹了react組件中的constructor和super知識(shí)點(diǎn)整理,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
react Input組件Compositionstart和Compositionend事件
這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫(kù)Input組件的坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
詳解vant2 自動(dòng)檢查表單驗(yàn)證 -validate
這篇文章主要介紹了vant2 自動(dòng)檢查表單驗(yàn)證 -validate,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10