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

【问题标题】：How to dynamically set react-native image source inside flat list如何在平面列表中动态设置 react-native 图像源
【发布时间】：2019-05-02 08:58:23
【问题描述】：

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

<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>

【问题讨论】：

标签： javascript android ios react-native ecmascript-6

【解决方案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 反应回调并使用 setState 函数设置数据

【讨论】：

嗨，我还没有硬编码状态的列表数据。我从 API 调用中得到它。我不能在图像源道具中使用 switch case 语句吗？
如果您从 api 获取记录，请将请求放入 componentDidMount 反应回调并使用 setState 函数设置数据

【解决方案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：先将图片路径存储在单独的数组中。

【讨论】：

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

);

}

【讨论】：

如果展示 100 张图片，然后使用 100 个案例呢？

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

【讨论】：

【解决方案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'),
  },
]

注意data 中的require 关键字，这将自动导入所需的图像，现在我们将这个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}}/>

希望对你有帮助

【讨论】：