javascript - 如何在平面列表中动态设置 react-native 图像源

Question

我是 React Native 的新手，我正在尝试用图像填充平面列表。所有图像都存储在应用程序内。我想在每次迭代中动态设置图像源。这就是我尝试过的。请帮助我。

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={
    (item)=>{
     switch(item.TypeX){
     case '1':
     return require('path 1');
     case '2':
     return require('path 2')
   }
}} />
  }
</FlatList>

Answer 1

你应该在数据中有图像..在你的情况下在 listDate

state = {
  listData: [
  {...,image:require('1.png')},
  {...,image:require('2.png')}
  ...
 ]
}

然后在你的渲染函数中

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={item.image}
}} />
  }
</FlatList>

如果您将图像存储在远程 url 中，那么您的状态应该如下所示

state = {
      listData: [
      {...,image: 'https://somedomain.com/imagename.png'},
      {...,image: 'https://somedomain.com/imagename2.png'}
      ...
     ]
    }

在你的渲染函数中你应该使用下面的代码

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={{uri: item.image}}
}} />
  }
</FlatList>

如果你从 api 获取记录，你将请求放在 componentDidMount react 回调中，并使用 setState 函数设置数据