Question

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

<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

在您的情况下，列表数据中应该包含图像。

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函数设置数据

Answer 2

我认为将开关放入图像源道具不是一个好主意。也不确定它是否会工作。但是，您可以做一件事。.当您从API获取要填充listData数组的数据时，可以在从API获取数据后追加图像的url /路径例如，您收到响应的对象数组：

res=[ { data1:'', data2:''..   },{ data1:'', data2:''.. },{ data1:'', data2:''.. },{ 
   data1:'', data2:''.. }];

因此您可以迭代此数组并附加如下图像：

res.map((obj, i) => { 
   let path = imagepPathArray[i]; 
   return {...obj, imagePath: path  
   }
})

并在FlatList中访问这样的图像路径：

renderItem={({ item }) => {
   <Image                                                             
    source={{uri: item.imagePath}}
}}

PS：首先将图像路径存储在单独的阵列中。

Answer 3

我找到了解决方法，我们可以在组件

中创建如下所示的简单函数

getFanSpeedImage(speed) {
        switch (speed) {
            case '1':
                return (<Image style={styles.statusButton} source={require('1.png')} />);
            case '2':
                return (<Image style={styles.statusButton} source={require('2.png')} />);
            case '3':
                return (<Image style={styles.statusButton} source={require('3.png')} />);
        }

    }

之后，我们可以像下面这样在主渲染函数中调用它

render(){
   return(

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
    {this.getFanSpeedImage(item.typeX)}
  }
</FlatList>

);

}

Answer 4

您还可以使用https://www.npmjs.com/package/react-native-placeholderimage库。该库有助于放置占位符，直到未从Internet或API下载图像。

renderItem={({item}) =>
    <PlaceHolderImage
    source={!!data.imageurl ? { uri: imgURL } : AppImages.placeHolderImage.source}
    style={iconStyle}
    placeHolderURI={AppImages.placeholderImage.source}
                    />
}

Answer 5

每当您必须使用Flatlist来显示图像时，如果将它们保留在一个数组中，并将其作为data传递给Flatlist，则这是一个好习惯

因此，首先，请尝试按以下方式构造数据。

const data = [{
    id: 1,
    name: 'Pikachu',
    image: require('./path/pikachu.png'),
  },
  {
    id: 2,
    name: 'One Plus',
    image: require('./path/onPlus.png'),
  },
  {
    id: 3,
    name: 'Hero Go Pro',
    image: require('./path/goPro.png'),
  },
]

请注意require中的data关键字，这将自动导入所需的图像，现在我们按如下方式将此data传递给Flatlist

<FlatList
  showsVerticalScrollIndicator={false}
  data={data}
  renderItem={({item}) => <MyComponent data={item} />} 
  keyExtractor={item => item.id}
  numColumns={2}
  />

现在我们已经将数据传递到<MyComponent/>，可以在同一组件中访问它了，我们可以执行以下操作来使用它来显示图像

<Image source={this.props.data.image} style={{height:20, width:20}}/>

希望这会有所帮助

如何在平面列表中动态设置本机图像源

5 个答案: