Question

我想在我的应用程序中水平显示图像列表。我知道如果我给平面列表horizontal ={true}提供支持，它将是水平的，但问题是FlatList根本不显示图像。这是我到目前为止尝试过的



const data = [
    {
      imageUrl: "https://c7.uihere.com/files/45/824/935/united-states-win-the-white-house-hotel-business-company-refresh-icon-thumb.jpg",
      id:"1"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"2"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"3"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"4"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"5"
    },
    {
      imageUrl: "http://via.placeholder.com/160x160",
      id:"6"
    }
  ];

export default class CircularImage extends Component {
    constructor(props) {
        super (props)
        this.state = {
            data:data
        }
    }


  render() {
  return (
    <FlatList 
    data = {this.state.data}
    renderItem = {({item}) => {
      <Image  styel = {styles.circularImage} source = {{uri : item.imageUrl}}/>
    }}
    keyExtractor ={item => {item.id.toString()}}
    />
  )
  }
}

Answer 1

您在return函数中缺少renderItem语句

<FlatList 
    data = {this.state.data}
    renderItem = {({item}) => {
      return <Image  styel = {styles.circularImage} source = {{uri : item.imageUrl}}/>
    }}
    keyExtractor ={item => {item.id.toString()}}
    />

OR

<FlatList 
    data = {this.state.data}
    renderItem = {({item}) => <Image  styel = {styles.circularImage} source = {{uri : item.imageUrl}}/>
    }
    keyExtractor ={item => {item.id.toString()}}
    />

Answer 2

在 React Native 中，图像必须具有宽度和高度才能显示。你可能错过了那部分。

反应本机FlatList不显示图像

2 个答案: