【React-native】<Image> 组件如何从前一界面动态获取 source

本文介绍了一种在React Native中动态加载图片的方法,避免使用固定的图片路径,而是从前一界面传递图片源地址,适用于React Native版本0.40及之后的版本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天,想通过前一界面传source的地址来对通用页面的图片样式进行更改,而不是单一的死地址,但是前一页面直接传地址的字符串是不行的,会报错,经研究,发现使用如下方式即可。


父界面:

在父界面中,给定一个属性,值直接为 require('../../image/payment.png') 

           <CommonWeights
                dataSource={dataSource}
                itemShowImage={require('../../image/payment.png')}
            />

子界面:

子界面接受这个参数直接使用即可。

    returnImage(){
        const sourceUrl = this.props.itemShowImage === undefined ? "" : this.props.itemShowImage;
        return (
            <Image
                source={sourceUrl}
            />
        );
    }

Bingo!


注:react-native版本0.40以后require(‘image!…’)引用图片方式不在支持详情请查看

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值