react-native Image之踩坑系列

最新推荐文章于 2024-11-27 14:50:02 发布

原创最新推荐文章于 2024-11-27 14:50:02 发布 · 936 阅读

0 ·

CC 4.0 BY-SA版权

本文主要探讨在react-native项目中遇到的Image组件无法通过变量加载本地图片的问题，详细介绍了研究过程和解决方案，提供了一个有效的代码块示例。

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

react-native Image之踩坑系列

废话不多说直接进入主题

react-native Image 变量加载本地图片

之前一直不能够在项目中本地用变量去加载图片，要么一张一张的写，要么就直接废了。这两天好好研究了下，总所周知，在rn下是不允许进行对Image组件中加载进行字符串拼接的

下面就来看看怎么搞定这个问题

代码块

代码块语法遵循标准markdown代码，例如：

    export default { //放在一个img_arr.js文件中
    png1:require('./img/icona.png'),
    png2:require('./img/iconb.png'),
    png3:require('./img/iconc.png'),
    png4:require('./img/icond.png')
};
import img_arr from './img_arr';//引入文件
onstructor(){ //设置state属性
         super()
         this.state={
            T_img:''
         };
     }
  <View>//根据输入的text文本的值来改变图片
                     <TextInput
          onChangeText={(text) => { this.setState({ T_img: text }) }}
        />
                <Image key={i} source={img_arr['png'+this.state.T_img]} style={{width:width,height:500,backgroundColor:"red"}} />
                </View>