reactjs - 如何通过定位文件REACT来渲染不同的图像源

Question

我正在尝试根据图像文件名提取不同的图像源。目前我有两个图像文件:“player1.jpg”和“player2.jpg”。下面的代码获取一个包含数字的数组数据，我通过图像源传递该数字；然而，这个方法不起作用。我应该选择什么方式来获取我想要的图像文件？

enter image description here

Answer 1

本地镜像动态源无法直接在React Native中工作。您必须创建本地镜像源数组，然后您可以使用该数组来显示图像。

例如创建图像数组:

const playersImages = [
  require('../img/player1.jpg'),
  require('../img/player2.jpg'),
  require('../img/player3.jpg'),
  require('../img/player4.jpg'),
  require('../img/player5.jpg')
];

然后按如下方式使用它:

<FlatList
  data={playersImages}
  renderItem={({item}) => (
    <View>
      <Text>{item}</Text>
      <Image source={item} style={{height: 100, width: 100}} />
    </View>
  )}
/>