Question

我正在尝试使用react FlatList渲染api的一些数据，ListItem每个文档都有许多字段，但是ListItems仅给我一个“ title”和“ subtitle”的选项，是否可以自定义和添加更多字段？

我检查了文档和其他示例，但我看到的只是“标题”和“字幕”

  render() {
    return (
      <ScrollView>
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem

                title={`${item.origin} - ${item.destination}`}
                subtitle={item.date}
                subtitle1={item.price}
                seats={{seats:item.status}}
              containerStyle={{ borderBottomWidth: 0 }}
            />
          )}
          keyExtractor={item => item._id}
          ItemSeparatorComponent={this.renderSeparator}

        />
      </List>
      </ScrollView>
    );
  }
}

我想在渲染器上显示更多的字段，而不仅仅是“标题”和“字幕”。

Answer 1

您可以尝试在渲染项中使用“视图”。而且，您可以应用样式来设置标题文本等的格式。

render() {
    return (
      <ScrollView>
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <View>
                <Text>`${item.origin} - ${item.destination}`</Text>
                <Text>{ item.date }</Text>
                <Text>{ item.price }</Text>
            </View>
          )}
          keyExtractor={item => item._id}
          ItemSeparatorComponent={this.renderSeparator}

        />
      </List>
      </ScrollView>
    );
  }
}

Answer 2

您不能向<ListItem/>本身添加其他字段，但是可以通过leftElement道具（而不是单个字符串）来呈现自定义组件以允许显示其他数据：

<ListItem leftElement={() => (<View>
        <View>{item.origin}</View>
        <View>{item.destination}</View>
        <View>{item.status}</View>
        <View>{item.price}</View>
    </View>)}
    subtitle={item.date} 
    containerStyle={{ borderBottomWidth: 0 }} />

您还可以使用许多其他道具，例如rightElement甚至rightTitle，rightSubtitle等，您可以以相同的方式使用它们来呈现自定义的react元素显示您拥有的其他数据。

我如何自定义或向FlatList，ListItem添加更多字段，除了“ title”和“ subtitle”

2 个答案: