修复 FlatList 的位置答案

【问题标题】：Fix Position of a FlatList修复 FlatList 的位置
【发布时间】：2020-07-08 20:21:17
【问题描述】：

我在我的代码中使用 FlatList，如下所示：

<View style={styles.listHolder}>
          {data && (
            <FlatList
              data={data.me.friends.nodes}
              horizontal={false}
              scrollEnabled
              renderItem={({ item }) => (
                <FriendItem friend={item} originatorId={data.me.id}/>
              )}
              keyExtractor={(item) => item.id.toString()}
              ListEmptyComponent={NoFriendsContainer}
            />
          )}
          {error && <ErrorContainer />}
        </View>

  listHolder: {
    width: '100%',
    alignItems: 'center',
  },

每个 FriendItem 看起来有点像这样：

 return (
    <View style={styles.item}>
      <TouchableOpacity
        onPress={() =>
          navigation.navigate('FriendDetails', {
            firstName: friend.firstName,
            rating: friend.rating,
            numberOfFriends: friend.friendsOfFriends?.totalCount,
            //onDeleteFriend: onDeleteFriend,
            vehicles: friend.vehicles,
          })
        }>
        <Thumbnail
          style={styles.thumbnail}
          source={{
            uri:
              'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
          }} />
      </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',
  },
});

现在的问题是 FlatList 是垂直渲染的，但它的滚动条是水平显示的（这不应该发生）。此外，我现在可以向任何方向移动它。这也不应该发生。我必须按原样修复它。我该怎么做？我不确定这是样式问题还是 FlatList 组件中的问题。

【问题讨论】：

标签： javascript css reactjs typescript react-native

【解决方案1】：

在下面的平面列表中添加 alwaysBounceVertical，

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

希望对您有所帮助。如有疑问，请随意

【讨论】：