ReactNative集成個推消息推送過程詳解
更新時間：2023年08月09日 10:45:42 作者：似水流年
這篇文章主要為大家介紹了ReactNative集成個推消息推送過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
前言
最近項目中需要集成消息推送功能，在以往的項目中都是使用的極光推送方案,現(xiàn)在的公司安卓端使用的是個推消息推送，所以計劃在本次使用RN重構項目的過程中也采用了個推方案， 即個推官方提供的推送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 需要去個推官網 注冊后，在后臺配置獲取。
4.在android/app/AndroidManifest.xml 的<application>標簽內添加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調用代碼
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;
}
}遇到的問題
按照以上的步驟就可以正常通過個推官網進行推送消息到手機上了，但是。。。
凡是就怕但是，哈哈。 在進行公司項目的業(yè)務推送的時候，手機通知欄竟然沒有任何反應，沒有推送消息文字和聲音提示，這就很難受了。
接下來，我開始檢查手機的通知設置以及和同事進行測試，發(fā)現(xiàn)他的安卓原生項目是可以正常收到推送的，問了后臺同事說也沒有特別的設置，這。。。
后來看了同事的Android代碼，發(fā)現(xiàn)這邊竟然是使用的個推的透傳消息，然后進行的處理。 oh my god!
見招拆招，拜讀了個推的官網，是這樣介紹透傳(自定義消息)和普通消息的區(qū)別的。
通知消息和透傳
- 通知消息：
通知展示時效果：響鈴、震動、通知是否可清除，下拉大圖、長文本。
通知點擊后效果：打開應用首頁、打開應用內指定頁面、打開瀏覽器指定網頁。
- 透傳消息：
即自定義消息，效果由開發(fā)者自行管理，個推只負責消息傳遞，不做任何處理，默認不會在通知欄中展示，開發(fā)者需自行處理展示方式或后續(xù)動作。
看了以上說明之后大體明白了， 又和后臺同事溝通了一下，確實采用的透傳方式，這意味著通過透傳方式進行消息推送，如果需要進行用戶提示的話，就需要開發(fā)者自行實現(xiàn)了。
ReactNative處理透傳消息
如果需要透傳信息通過通知欄提醒用戶的話，就相當于本地進行消息推送了。這里可以通過實現(xiàn)原生代碼的方式進行處理，也可以使用一些第三方進行處理，這里推薦react-native-push-notification進行處理。
在使用這個庫的時候，可能會遇到如下錯誤提示:
只需要進行如下設置， 將requestPermissions設置為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集成個推消息推送過程詳解的詳細內容，更多關于ReactNative集成個推消息推送的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了react中代碼塊輸出，代碼高亮顯示，帶行號，能復制的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了react-router-dom?V6的配置使用實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了為react組件庫添加typescript類型提示，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
對于剛學前端的大家來說,對于React中的事件監(jiān)聽寫法有所疑問很正常，特別是React中箭頭函數(shù)使用這塊，下面這篇文章主要給大家深入的講解了關于React中何時使用箭頭函數(shù)的相關資料，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2017-08-08
React中style的使用和直接在HTML中使用有些不同，第一，React中必須是style="opacity:{this.state.opacity};"這種寫法，第二如果設置多個style格式如下，多個style中間使用逗號分割，這篇文章主要介紹了React中style的使用注意事項,需要的朋友可以參考下2023-02-02
jenkins分環(huán)境部署vue/react項目的方法步驟
這篇文章主要介紹了jenkins分環(huán)境部署vue/react項目的方法，本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了React的組件協(xié)同使用,文中給大家提到在React開發(fā)中，有哪些場景的組件協(xié)同？又如何去實現(xiàn)組件的協(xié)同使用呢？本文都給大家提到，感興趣的朋友跟隨小編一起看看吧2021-09-09
react組件中的constructor和super知識點整理
這篇文章主要介紹了react組件中的constructor和super知識點整理,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
react Input組件Compositionstart和Compositionend事件
這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫Input組件的坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了vant2 自動檢查表單驗證 -validate,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10