在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/