Question

我正在尝试在React Native中呈现一个列表，但是什么也没显示。我也在渲染之前记录了该列表，它表明正在填充数据字段，但未显示任何内容。

This is the ListView code that I am trying that is NOT working.

This is the way that I am currently rendering the list. This method is working for me.

之所以要使用ListView而不是当前使用的当前方法，是因为我从文档中读取到ListView具有更好的属性和性能。

谢谢！

Answer 1

尝试正确地分解renderItem中的项目。我的意思是：

  <FlatList 
    data={this.state.users}
    renderItem={({item}) => {
      return (
        <View>
          <Image source={{uri: item.image}} style={{width: 150, height: 150}} />
          <Text>{item.login}</Text>
        </View>
      )
    }}
    keyExtractor={(user) => user.id}
  />

或者，如果您更喜欢将其称为info，请定义一个函数：

  renderItem = (info) => {
    return (
      <View>
        <Image source={{uri: info.image}} style={{width: 150, height: 150}} />
        <Text>{info.login}</Text>
      </View>
    )
  }

像这样称呼

  <FlatList 
    data={this.state.users}
    renderItem={({item}) => this.renderItem(item)}
    keyExtractor={(user) => user.id}
  />

查看更多in the offical doc

Answer 2

您需要从FlatList中的数据属性中提取item属性

<FlatList 
    data={this.state.users}
    renderItem={({item}) => {
    return (
      <View>
        <Image source={{uri: item.image}} style={{width: 150, height: 150}} />
        <Text>{item.login}</Text>
      </View>
    )
  }}
  keyExtractor={(user) => user.id}
/>

注意renderItem回调中的 {item}

另一个示例

<FlatList 
    data={this.state.users}
    renderItem={(data) => {
    return (
      <View>
        <Image source={{uri: data.item.image}} style={{width: 150, height: 150}} />
        <Text>{data.item.login}</Text>
      </View>
    )
  }}
  keyExtractor={(user) => user.id}
/>

我不知道如何使ListView正常工作

2 个答案: