华为ArkUI ResourceStr使用细节若干 ‘app.media.‘+val

最新推荐文章于 2025-12-18 11:32:02 发布

原创最新推荐文章于 2025-12-18 11:32:02 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #linux #javascript

ResourceStr拼装时以下方式时会报错。

错误方式：字符串 + string变量/常量

const val:string = 'img2';
$r('app.media.'+val);

正确方式：使用``间隔号，而不是''引号。即英文输入模式下，键盘1左侧键

const val:string = 'img2';
$r(`app.media.${val}`);

函数正确方式：你也可以使用函数来触发状态刷新比如：

@Local val:string = 'img2';
test(){
    this.val = 'img5';
}
changeImg = (str:string):ResourceStr=>{
    return $(`app.media.${str}`);
}
Image(this.changeImg(this.val));

错误方式：但是！【注意！】一旦你使用异步 async ，则会报错

1.异步函数报错

@Local val:string = 'img2';
test(){
    this.val = 'img5';
}
changeImg = async (str:string):Promise<ResourceStr>=>{
    try{
        const reData = await sqliteFun(str);
        return $(`app.media.${reData}`);
    } catch (e){ ... }
}
Image(this.changeImg(this.val));

2.以组装方式字符串+异步函数，则不报错但无效！

@Local val:string = 'img2';
test(){
    this.val = 'img5';
}
changeImg = async (str:string):Promise<string>=>{
    try{
        const reData:string = await sqliteFun(str);
        return reData;
    } catch (e){ ... }
}
Image($r(`app.media.${this.changeImg(this.val)}`));

异步正确方式：异步该怎么办？

作用与@State @Local等装饰符绑定的变量本身。比如：

@Trace face:ResourceStr = $r('app.media.img5');

private async setFace(){
    const data: skinDatas = await SQLiteGetSkinById(this.id);
    this.face = $r(`app.media.${data.face}`);
  }

原理即，不要把异步作用于UI标签，异步应作用于变量赋值。

异步->回调->赋值->UI刷新