我有一个FlatList,其中包含一堆使用PanResponder的可拖动元素。元素拖动得很好,除了它们被"锁定"到 FlatList 所在的区域之外,没有任何问题。FlatList 只有大约屏幕宽度的三分之一,我希望他们能够将这些元素从这三分之一拖到另外三分之二,但我似乎不能和它们一起走出 FlatList。如果我删除平面列表,除了能够滚动浏览项目之外,一切都可以按我想要的方式工作。
我不确定我是否遗漏了为什么它们被锁定在 FlatList 中,或者是否有一种不同的方法会更好。关于如何允许将这些元素拖到平面列表之外的任何想法将不胜感激。
主渲染
<View style={{padding: 10, display: "flex", justifyContent: "center"}}>
<FlatList
numColumns={2}
data={this.props.fixtures}
keyExtractor={this.keyExtractor}
renderItem={(item) =>this.renderFixture(item)}
/>
</View>
渲染项函数
renderFixture = (item) => {
let i = item.item;
return <View style={{padding: 5, marginBottom: 10}}>
<DragDropSidebar onDrop={this.props.onDrop} fixtureName={i.key} imgUrl={i.url} height={i.height} width={i.width}>
<FastImage style={{borderRadius: 5}} source={{uri: i.url}} style={{width: 150, height: 150}}/>
</DragDropSidebar>
<Text style={{color: "white", padding: 5}}>{i.name}</Text>
</View>
}
我找到的解决问题的方法实际上非常简单。我没有意识到默认溢出值在平面列表上发生了变化。将我的溢出值设置为在平面列表上可见解决了我的问题。