如何在React Native項目中集成華為遠程配置服務


集成步驟

  1. 安裝React Native依賴
    npm install -g yarn

在這里插入圖片描述

  1. 開通服務&創建工程
    a) 在AGC創建Android應用並開通遠程配置服務,添加配置項

在這里插入圖片描述

b) 命令行創建React Native工程(RemoteConfig為創建的工程目錄名)
npx react-native init RemoteConfig

在這里插入圖片描述

c) 在React Native項目中添加配置文件
將配置文件“agconnect-services.json”添加到React Native項目的android/app目錄下

在這里插入圖片描述

d) 配置Maven倉地址和AGC插件地址。

  1. 打開React Native項目android目錄下的build.gradle文件。
    在allprojects ->repositories里面配置maven倉地址。
    在buildscript->repositories中配置maven倉地址。
    在buildscript->dependencies中配置AppGallery Connect插件地址。

在這里插入圖片描述

  1. 添加編譯依賴和AGC插件地址。
    打開React Native項目android/app文件夾下的build.gradle文件,添加插件地址。

在這里插入圖片描述

  1. 安裝插件
    在項目工程目錄的pacakge.json文件下,將需要的插件加入到dependencies中:

在這里插入圖片描述

然后調用npm install方法安裝這些插件,也可以用yarn
npm install

在這里插入圖片描述

  1. 功能展示
    a) 應用本地配置
    將本地配置設置為map格式,調用applyDefault方法應用到本地

在這里插入圖片描述

b) 獲取雲端數據/獲取上次獲取的雲端數據
與android相同,通過fetch接口獲取雲端的配置,接口后的參數為獲取雲端參數的間隔

在這里插入圖片描述

同樣的,如果想獲取上次拉取的數據則通過applyLastFetch方法:

在這里插入圖片描述

c) 將雲端數據與本地數據合並
與Android相同,調用getMergedAll完成合並

在這里插入圖片描述

d) 清除數據
直接調用clearAll接口清除之前拉取的數據的緩存

在這里插入圖片描述

e) 拉取雲端某key值對應的數據
調用getValue接口直接獲取雲端相關數據

在這里插入圖片描述

f) 打包
在項目根目錄下使用命令yarn android可以直接打出android的包:

在這里插入圖片描述

g) 結果展示
當我們獲取到值以后可以看到雲端的值和本地配置的值都可以正確的獲取到:

在這里插入圖片描述

欲了解更多詳情,請參見:

AGC 遠程配置Demo(React Native):https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Examples/agc-crash-samplecode-reactnative-0000001063369277


原文鏈接:https://developer.huawei.com/consumer/cn/forum/topic/0201411011652350365?fid=0101271690375130218

原作者:Mayism


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM