在 FlatList 中仅禁用水平滚动

Question

如何在我的 FlatList 上只禁用水平滚动？把它设置为 false 是行不通的。我希望能够垂直滚动而不是水平滚动。

<FlatList
              data={data.me.friends.nodes}
              //horizontal={false}
              //scrollEnabled={false}
              renderItem={({ item }) => (
                <FriendItem friend={item} originatorId={data.me.id}/>
              )}
              keyExtractor={(item) => item.id.toString()}
              ListEmptyComponent={NoFriendsContainer}
            />

FriendItem 的 return。 FriendItem 是 FlatList 中使用的 renderItem:

  return (
    <View style={styles.item}>
      <TouchableOpacity
        onPress={() =>
          navigation.navigate('FriendDetails')
        }>
        <Thumbnail
          style={styles.thumbnail}
          source={{
            uri:
              'https://cdn4.iconfinder.com/person-512.png',
          }}></Thumbnail>
      </TouchableOpacity>
      <View style={styles.nameContainer}>
        <Text style={styles.userName}>{userName}</Text>
      </View>
      <View style={styles.deleteButtonContainer}>
        <Button
          rounded
          style={styles.deleteButton}
          onPress={() => onDeleteFriend(originatorId, friend.id)}>
          <Icon name="trash-o" size={moderateScale(20)} color="black" />
        </Button>
      </View>
    </View>
  );
};

样式：

export const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    borderRadius: moderateScale(20),
    padding: moderateScale(20),
    marginVertical: moderateScale(8),
    marginHorizontal: 16,
    height: moderateScale(110),
    width: moderateScale(360),
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  userName: {
    paddingRight: 55,
    paddingLeft: 10,
    paddingTop: 20,
  },
  deleteButton: {
    backgroundColor: '#31C283',
    width: moderateScale(45),
    justifyContent: 'center',
  },
  deleteButtonContainer: {
    paddingTop: 12,
    marginRight: 2,
  },
  thumbnail: {
    height: 85,
    width: 85,
    marginLeft: 2,
    paddingRight: 0,
    position: 'relative',
  },
  nameContainer: {
    flexDirection: 'row',
  },
});

编辑：

当有4个项目时，似乎还可以，但是一旦将另一个项目添加到列表中，最后一个项目就会被打乱并与页脚重叠？应用程序。

它实际上应该在它后面，以便我们可以向下滚动并查看下一个项目。

Answer 1

horizontal参数与水平滚动无关

https://reactnative.dev/docs/flatlist#horizontal

If true, renders items next to each other horizontally instead of stacked vertically.

你的 'scroll issue' 就是你的 FriendItem ，问题是 width: moderateScale(360).

如果你想让你的项目全宽，有边距，你可以删除它。

示例与 moderateScale(360)

示例删除 width

 item: {
      backgroundColor: "white",
      borderRadius: moderateScale(20),
      padding: moderateScale(20),
      marginVertical: moderateScale(8),
      marginHorizontal: 16,
      height: moderateScale(110),
      justifyContent: "space-between",
      flexDirection: "row",
    }

希望对您有所帮助。此致，

在 FlatList 中仅禁用水平滚动

Disable only horizontal scrolling in FlatList

javascript

typescript

reactjs

react-native

react-native-flatlist