ReactNative集成個推消息推送過程詳解
前言
最近項目中需要集成消息推送功能，在以往的項目中都是使用的極光推送方案,現(xiàn)在的公司安卓端使用的是個推消息推送，所以計劃在本次使用RN重構(gòu)項目的過程中也采用了個推方案， 即個推官方提供的推送SDK React Native 插件（支持 Android & iOS）react-native-getui。
項目ReactNative版本號：0.63.4
集成
1. 自動添加依賴
yarn add react-native-getui cd ios pod install
2.手動添加配置
安卓部分
1.在android/build.gradle中添加maven地址中添加配置
maven {
url "http://mvn.gt.igexin.com/nexus/content/repositories/releases/"
}
2.android目錄下，在app/build.gradle中添加如下配置
dependencies中添加依賴
implementation project(':react-native-getui')3.android--> defaultConfig中添加如下配置
ndk {
abiFilters "armeabi", "armeabi-v7a", "x86_64", "x86"
}
// 配置個推的三個參數(shù)
manifestPlaceholders = [
GETUI_APP_ID : "your app id",
GETUI_APP_KEY : "your app key",
GETUI_APP_SECRET : "your app secret"
]注意：yourAppId/yourAppKey/yourAppSecret 需要去個推官網(wǎng) 注冊后，在后臺配置獲取。
4.在android/app/AndroidManifest.xml 的<application>標簽內(nèi)添加meta-data
<!-- 配置個推的三個參數(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);
// 初始化個推模塊
GetuiModule.initPush(this);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
}ReactNative項目中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 通知到達', JSON.stringify(notification))
break
case 'notificationClicked':
console.log('notificationArrived 通知點擊', JSON.stringify(notification))
break
default:
break
}
}
);
}
componentWillUnmount() {
// 移除消息監(jiān)聽
this.receiveRemoteNotificationSub &&
this.receiveRemoteNotificationSub.remove();
}
render() {
return null;
}
}遇到的問題
按照以上的步驟就可以正常通過個推官網(wǎng)進行推送消息到手機上了，但是。。。
凡是就怕但是，哈哈。 在進行公司項目的業(yè)務推送的時候，手機通知欄竟然沒有任何反應，沒有推送消息文字和聲音提示，這就很難受了。
接下來，我開始檢查手機的通知設(shè)置以及和同事進行測試，發(fā)現(xiàn)他的安卓原生項目是可以正常收到推送的，問了后臺同事說也沒有特別的設(shè)置，這。。。
后來看了同事的Android代碼，發(fā)現(xiàn)這邊竟然是使用的個推的透傳消息，然后進行的處理。 oh my god!
見招拆招，拜讀了個推的官網(wǎng)，是這樣介紹透傳(自定義消息)和普通消息的區(qū)別的。
通知消息和透傳
- 通知消息：
通知展示時效果：響鈴、震動、通知是否可清除，下拉大圖、長文本。
通知點擊后效果：打開應用首頁、打開應用內(nèi)指定頁面、打開瀏覽器指定網(wǎng)頁。
- 透傳消息：
即自定義消息，效果由開發(fā)者自行管理，個推只負責消息傳遞，不做任何處理，默認不會在通知欄中展示，開發(fā)者需自行處理展示方式或后續(xù)動作。
看了以上說明之后大體明白了， 又和后臺同事溝通了一下，確實采用的透傳方式，這意味著通過透傳方式進行消息推送，如果需要進行用戶提示的話，就需要開發(fā)者自行實現(xiàn)了。
ReactNative處理透傳消息
如果需要透傳信息通過通知欄提醒用戶的話，就相當于本地進行消息推送了。這里可以通過實現(xiàn)原生代碼的方式進行處理，也可以使用一些第三方進行處理，這里推薦react-native-push-notification進行處理。
在使用這個庫的時候，可能會遇到如下錯誤提示:
只需要進行如下設(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集成個推消息推送過程詳解的詳細內(nèi)容，更多關(guān)于ReactNative集成個推消息推送的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了React的diff算法核心復用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了詳解React+Koa實現(xiàn)服務端渲染(SSR)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
react-native DatePicker日期選擇組件的實現(xiàn)代碼
本篇文章主要介紹了react-native DatePicker日期選擇組件的實現(xiàn)代碼，具有一定的參考價值，有興趣的可以了解下2017-09-09
下面小編就為大家分享一篇利用CDN加速react webpack打包后的文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
使用react-native-image-viewer實現(xiàn)大圖預覽
這篇文章主要介紹了使用react-native-image-viewer實現(xiàn)大圖預覽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
React?useEffect異步操作常見問題小結(jié)
本文主要介紹了React?useEffect異步操作常見問題小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
react antd-design Select全選功能實例
這篇文章主要介紹了react antd-design Select全選功能實例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了React插槽使用方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
React Grid Layout基礎(chǔ)使用示例教程
React Grid Layout是一個用于在React應用程序中創(chuàng)建可拖拽和可調(diào)整大小的網(wǎng)格布局的庫,通過使用React Grid Layout,我們可以輕松地創(chuàng)建自適應的網(wǎng)格布局,并實現(xiàn)拖拽和調(diào)整大小的功能,本文介紹了React Grid Layout的基礎(chǔ)使用方法,感興趣的朋友一起看看吧2024-02-02
解決React報錯Cannot?find?namespace?context
這篇文章主要為大家介紹了React報錯Cannot?find?namespace?context分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12