如何集成华为AGC远程配置-React Native
简介
AppGallery Connect远程配置服务提供了在线的配置参数管理能力，可以实现应用在线更改行为和外观，而无需用户下载应用更新。
AppGallery Connect远程配置服务提供云端服务，管理台和客户端SDK，应用集成客户端SDK后可以定期获取远程配置管理台配置下发的参数值，实现客户端行为和UI的修改。
开通服务和集成SDK
1、登录AppGallery Connect网站，点击“我的项目”。
2、在项目列表中找到您的项目，在项目下的应用列表中选择需要开通远程配置服务的应用。
3、进入“增长 > 远程配置”，如果远程配置服务未开通，请点击“立即使用”，开通远程配置服务。
4、选择常规页签下的“应用”区域，下载agconnect-services配置文件。
Android：下载agconnect-services.json文件。
iOS：下载agconnect-services.plist文件。
5、在React native开发项目中添加配置文件。
Android：将配置文件agconnect-services.json添加到React native项目的android/app目录下。
iOS：用Xcode打开React native项目的iOS模块，将配置文件agconnect-services.plist添加进项目。
6、进入项目工程目录下，使用如下命令安装远程配置服务插件。
npm i @react-native-agconnect/remoteconfig
7、安装成功效果如下图。
界面设计
本次Codelab中您可以在React Native项目中创建一个布局页面，参照下图进行设计，新增几个功能按钮，有拉取云端数据和使数据生效等功能：
配置云端参数值
1、选择"增长 > 远程配置"，此时选中"配置项管理"页签，点击"添加配置项"按钮。
2、在添加配置项页填入配置默认值名称和默认值，即通过SDK获取的远程配置的key和value。点击"保存配置项"，返回远程配置页点击"发布"。
功能开发
1、您可以设置以下默认值，点击“Apply Default”按钮调用AGCRemoteConfig.applyDefault方法，使默认值生效。
<Button
title="apply Default"
onPress={() => {
var map = new Map();
map.set("default_key_string", '11');
map.set("default_key_true", true);
map.set("default_key_int", 100);
map.set("default_key_double", 3.14);
AGCRemoteConfig.applyDefault(map);
}}
/>
2、然后通过点击“fetch 0”按钮，调用AGCRemoteConfig.fetch方法，来拉取云端数据。
<Button
title="fetch 0"
onPress={() => {
AGCRemoteConfig.fetch(0)
.then(() => {
console.log("fetch result success");
})
.catch((configError)=>{
console.log("code==" + configError.code);
console.log("message==" + configError.message);
console.log("throttleEndTime==" + configError.throttleEndTime);
});
}}
/>3、拉取云端数据成功后，可以点击“apply last fetch”按钮，调用AGCRemoteConfig.applyLastFetched方法，使拉取的数据生效。
<Button
title="apply last fetch"
onPress={() => {
AGCRemoteConfig.applyLastFetched();
console.log("applyLastFetched");
}}
/>4、您可以通过点击“get Merged All”按钮，调用AGCRemoteConfig.getMergedAll获取全部键值对。也可以点击“get Value”按钮，调用AGCRemoteConfig.getValue获取指定key的value。
<Button
title="get Merged All"
onPress={() => {
AGCRemoteConfig.getMergedAll().then((map) => {
map.forEach(function (value, key) {
console.log("key-->" + key + ",value-->" + value);
});
});
})
/>
<Separator />
<Button
title="get Value"
onPress={() => {
AGCRemoteConfig.getValue("default_key_string").then((data) => {
console.log("default_key_string ==" + (data));
});
AGCRemoteConfig.getValue("default_key_true").then((data) => {
console.log("default_key_true ==" + (data));
});
AGCRemoteConfig.getValue("key_static").then((data) => {
console.log("key_static ==" + (data));
});
AGCRemoteConfig.getValue("testkey").then((data) => {
console.log("remote_testkey ==" + (data));
});
}}
/>5、通过AGCRemoteConfig.getSource可以获取数据来源，判断获取的参数值是本地的还是远程的。
<Button
title="get Source"
onPress={() => {
AGCRemoteConfig.getSource("default_key_string").then((source) => {
switch (source) {
case SOURCE.STATIC:
console.log('source is STATIC');
break;
case SOURCE.DEFAULT:
console.log('source is DEFAULT');
break;
case SOURCE.REMOTE:
console.log('source is REMOTE');
break;
}
});
})
/>6、点击“clearAll”按钮，清空缓存数据。
<Button
title="clearAll"
onPress={() => {
AGCRemoteConfig.clearAll();
}}
/>打包测试
1、重新编译后，使用Android Studio或者Xcode打开对应工程，点击运行按钮，在手机或模拟器上运行应用。您也可以打开终端，执行以下命令来运行应用。
yarn android
yarn ios
2、依次点击“fetch 0”，“apply last fetch”，“get Merged All”，可以看到控制台输出最新的云侧配置项数据。
3、修改云侧配置的值，重新拉取云侧数据并使其生效。可以看到控制台输出最新修改的云侧配置项数据。
恭喜您
祝贺您，您已经成功地构建了您的第一个集成AGC远程配置服务的应用程序，并学到了如何在AGC控制台设置云端配置值。您也可以在AGC上添加不同类型的远程配置数据，然后在APP上查看。
参考文档
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
