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

【问题标题】：Remove bottom extra spaces on each ListItem/Flatlist rows in React Native?删除 React Native 中每个 ListItem/Flatlist 行底部多余的空格？
【发布时间】：2019-12-04 20:16:30
【问题描述】：

我想删除每个列表底部的多余空格。我可以修改它的唯一道具是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}
    />

【问题讨论】：

标签： javascript react-native react-native-elements

【解决方案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/

【讨论】：

我还没有测试过你的解决方案，但我现在会接受它。