如何使用本机反应动态显示图像

Question

我想用 react native 构建一个相册应用，主要思想是使用sectionList 并将数据显示在这样的数组中：

class CustomImage extends Component{
  render(){
    return(
      <View>
          <Image style={styles.Img} source={this.props.imageName} />
          <Text style={styles.text}>{this.props.name}</Text>
      </View>
    );
  }
}

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
      <SectionList
          sections={[
            {titile: 'small soldier', data: ["./gifs/2.gif", "./gifs/3.gif", "./gifs/4.gif"]}

          ]}
          renderItem={({item}) => <CustomImage name={item} fromWeb={false} imageName={require(item)} />}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
      />
      </View>
    );
  }
}

上面的代码被缩进以使其工作受到this answer的启发

我已经将 gifs 文件夹放在了项目文件夹下，如果我在 Image 组件中使用静态字符串作为 source={require(url)}，一切都会奏效，但是当 url 从数组项迭代中出来时，它不会起作用。

如何使用 react native 进行这项工作？

编辑

不知道我是否可以编辑以使其更具体，我真正想做的是使用这样的生成数组：

function numberRange(start, end){
  return new Array(end-start).fill().map((d,i) => {
    var url = "./gifs/" + ( i+start) + ".gif";
    return require(url)
  });
}
export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
      <SectionList
          sections={[
            {title: 'small soldier', data: numberRange(2,30)},
            {title: 'small soldier', data: numberRange(31,60)}

          ]}
          renderItem={({item}) => <CustomImage name={item} fromWeb={false} imageName={item} />}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
      />
      </View>
    );
  }
}

不知道有没有办法使用这个数组生成器来制作数组或者我必须徒手一个一个地输入路径:-(

Answer 1

require 是一个具有 preload 特性的 javascript 关键字。

而且，图像在运行时不会与路径相关 --- 提供路径不会得到任何东西。它成为捆绑资源，因此使用console.log，您只能看到与捆绑包相关的资源令牌：_1_2。

即使将require("./gifs/1.gif") 更改为require("./gifs/"+"1.gif") 也不行。

试试这个：

data: [require("./gifs/2.gif"), require("./gifs/3.gif"), require("./gifs/4.gif")]