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

【问题标题】：How to render different Image source through locating the file REACT如何通过定位文件 REACT 来渲染不同的图像源
【发布时间】：2020-01-09 04:33:53
【问题描述】：

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

enter image description here

【问题讨论】：

标签： reactjs react-native

【解决方案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>
  )}
/>

【讨论】：