除了“标题”和“副标题”之外，如何自定义或向 FlatList、ListItem 添加更多字段

Question

我正在尝试使用 react FlatList 从 api 呈现一些数据，ListItem 每个文档都有许多字段，但 ListItems 只给我一个“标题”和“副标题”的选项，是否有自定义和添加更多字段的选项？

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

  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

您可以尝试在渲染项中使用 View 。您可以应用样式来格式化标题文本等。

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>
    );
  }
}