华为ArkUI ResourceStr使用细节若干 ‘app.media.‘+val
·
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刷新
更多推荐


所有评论(0)