如何在FlatList和ListItem中自定义或添加更多字段，除了“标题”和“副标题”？

Question

我正在尝试使用React FlatList和ListItem从API渲染一些数据，每个文档都有许多字段，但是ListItem只提供了“标题”和“子标题”的选项，是否有任何方法可以自定义并添加更多字段？

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

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

我想在呈现中显示比“标题”和“子标题”更多的字段。

- Swam Didam

Answer 1

你可以尝试在渲染项中使用View。你还可以应用样式来格式化标题文本等内容。"Original Answer"的翻译是"最初的回答"。

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

- Archulan Rajakumaran

---

谢谢，这对我有用，尽管我不得不将item.date改为{item.date}。 - Swam Didam

不用谢。我会修改答案。顺便说一下，请将答案标记为正确的。 - Archulan Rajakumaran

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元素，以显示您拥有的附加数据。

- Dacre Denny