如何在React Native项目中集成HarmonyOS鸿蒙Next华为远程配置服务

如何在React Native项目中集成HarmonyOS鸿蒙Next华为远程配置服务 如果你想在react native框架下快速体验远程配置的功能，请参考demo。

集成步骤

  1. 安装React Native依赖

    npm install -g yarn

  2. 开通服务&创建工程

    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文件，添加插件地址。

  3. 安装插件

    在项目工程目录的pacakge.json文件下，将需要的插件加入到dependencies中：

    然后调用npm install方法安装这些插件，也可以用yarn

    npm install

  4. 功能展示

    a) 应用本地配置

    将本地配置设置为map格式，调用applyDefault方法应用到本地

    b) 获取云端数据/获取上次获取的云端数据

    与android相同，通过fetch接口获取云端的配置，接口后的参数为获取云端参数的间隔

    同样的，如果想获取上次拉取的数据则通过applyLastFetch方法：

    c) 将云端数据与本地数据合并

    与Android相同，调用getMergedAll完成合并

    d) 清除数据

    直接调用clearAll接口清除之前拉取的数据的缓存

    e) 拉取云端某key值对应的数据

    调用getValue接口直接获取云端相关数据

    f) 打包

    在项目根目录下使用命令yarn android可以直接打出android的包：

    g) 结果展示

    当我们获取到值以后可以看到云端的值和本地配置的值都可以正确的获取到：


更多关于如何在React Native项目中集成HarmonyOS鸿蒙Next华为远程配置服务的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在React Native项目中集成HarmonyOS鸿蒙Next的华为远程配置服务，可以通过以下步骤实现：

  1. 安装依赖：首先，确保你的React Native项目已经初始化。然后，使用npm或yarn安装华为远程配置服务的React Native插件。例如：

    npm install [@react-native-hms](/user/react-native-hms)/remote-config

  2. 配置项目：在项目的android/app/build.gradle文件中，添加华为远程配置服务的依赖：

    dependencies {
    implementation 'com.huawei.hms:remote-config:6.0.0.300'
}

  3. 初始化服务：在React Native的入口文件（如index.js）中，初始化华为远程配置服务：

    import { HMSRemoteConfig } from '[@react-native-hms](/user/react-native-hms)/remote-config';

HMSRemoteConfig.init();

  4. 获取配置：在需要获取远程配置的地方，调用fetch方法获取配置数据，并使用apply方法应用配置：

    HMSRemoteConfig.fetch().then(() => {
    HMSRemoteConfig.apply();
}).catch(error => {
    console.error(error);
});

  5. 使用配置：通过getValue方法获取具体的配置值：

    const configValue = HMSRemoteConfig.getValue('your_config_key');
console.log(configValue);

  6. 处理更新：如果需要监听配置的更新，可以使用onRemoteConfigUpdated方法：

    HMSRemoteConfig.onRemoteConfigUpdated((config) => {
    console.log('Config updated:', config);
});

  7. 调试与测试：在开发过程中，可以使用setDeveloperMode方法启用开发者模式，方便调试：

    HMSRemoteConfig.setDeveloperMode(true);

更多关于如何在React Native项目中集成HarmonyOS鸿蒙Next华为远程配置服务的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在React Native项目中集成HarmonyOS鸿蒙Next的华为远程配置服务，可以按照以下步骤进行：

  1. 安装依赖：首先，确保你的React Native项目已经初始化，然后安装华为远程配置服务的React Native插件。可以通过npm或yarn安装：

    npm install [@react-native-agconnect](/user/react-native-agconnect)/remote-config

  2. 配置项目：在android/app/build.gradle文件中添加华为远程配置服务的依赖：

    dependencies {
    implementation 'com.huawei.agconnect:agconnect-remote-config:1.6.0.300'
}

  3. 初始化服务：在React Native的入口文件（如index.js）中初始化华为远程配置服务：

    import { RemoteConfig } from '[@react-native-agconnect](/user/react-native-agconnect)/remote-config';

RemoteConfig.init();

  4. 获取配置：在需要的地方获取远程配置：

    RemoteConfig.fetch().then(() => {
    RemoteConfig.activate().then(() => {
        const value = RemoteConfig.getValue('your_config_key');
        console.log(value.asString());
    });
});

  5. 处理更新：监听配置更新，确保应用始终使用最新的配置：

    RemoteConfig.onConfigUpdated(() => {
    RemoteConfig.activate().then(() => {
        const value = RemoteConfig.getValue('your_config_key');
        console.log(value.asString());
    });
});
回到顶部