在 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 道具（大小）。按照这个 link: https://react-native-elements.github.io/react-native-elements/docs/avatar.html#props

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

在 React Native 中删除每个 ListItem/Flatlist 行的底部额外空格？

Remove bottom extra spaces on each ListItem/Flatlist rows in React Native?

javascript

react-native

react-native-elements