react-native - 反应原生 FlatList 不显示图像

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()}}
    />
  )
  }
}

标签： react-native

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()}}
    />

或者

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