平面列表在所有方向上移动/拖动



当我点击FlatList时,我可以向所有方向(上/下/左右(拖动和移动它。尽管列表看起来是垂直的(可能是因为样式的原因(,但滚动条仍然是水平显示的。如何禁用此拖动?

这就是我使用FlatList:的方式

<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 (
<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>
);
};

FriendItem的样式:

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',
},
});

我也试着去除TouchableOpacity,但没有什么不同。

您可以尝试的内容。如下:

更新:

<Flatlist    
bounces={false}/>

在这里试试,或者在顶部滚动视图中添加反弹={false}(如果它在中(

希望能有所帮助。无需怀疑

出现此问题是因为有时您给平面列表的父视图指定了宽度。如下所示。

<View style={{width: '90%'}}>
<FlatList/>
</View>

只需将平面列表添加到相同的宽度,反弹为false。

<View style={{width: '90%'}}>
<FlatList
contentContainerStyle={{width: '90%'}}
bounces={false}
/>
</View>

通过添加反弹=false,平面主义者将无法拖动到不同的方向。

最新更新