删除 React Native 中每个 ListItem/Flatlist 行底部的多余空格？

Question

我想删除每个列表底部的额外空格。 我能够修改它的唯一道具是contentContainerStyle但只有在我指定高度时才会添加额外的空间。

  renderItem = ({ item }) => (
    <ListItem
      // contentContainerStyle={{ height: 40 }}
      onPress={() => {
        this.props.navigation.navigate("Chat", {
          userToId: item.id,
          UserToName: item.username
        });
      }}
      titleStyle={{
        marginTop: "5%",
        fontFamily: "open-sans-semi-bold",
        fontSize: 20
      }}
      title={item.username}
      leftAvatar={{
        source: { uri: item.profile },
        width: 50,
        height: 50,
        borderRadius: 25,
        overflow: "hidden"
      }}
      subtitleStyle={{ fontSize: 14, marginBottom: "5%" }}
      subtitle={item.message}
      rightSubtitleStyle={{
        marginBottom: "110%",
        width: "450%",
        marginLeft: "10%"
      }}
      rightSubtitle={
        item.userEvents
          ? `${item.userEvents.event} ${moment(
              item.userEvents.dateTime
            ).calendar()} on ${item.userEvents.location}`
          : ""
      }
      bottomDivider
      chevron
    />
  );

    <FlatList
      data={this.state.usersInfo}
      renderItem={this.renderItem}
      keyExtractor={item => item.id}
    />

Answer 1

只需删除 leftAvatar 的宽度和高度，您就可以使用 Avatar 道具（大小）。 按照此链接： https : //react-native-elements.github.io/react-native-elements/docs/avatar.html#props

同时更正subtitleStyle 和rightSubtitleStyle 的marginBottom。 您可以在此链接上查看更好的列表示例： https : //blog.hackajob.co/create-a-list-using-react-native-elements/