FlatList 将 PanResponder 项锁定在里面

Question

我有一个 FlatList，其中包含一堆使用 PanResponder 的可拖动元素。这些元素拖动得很好，除了它们 "locked" 到 FlatList 所在的区域之外没有任何问题。 FlatList 大约只有屏幕宽度的三分之一，我希望他们能够将这些元素拖出这三分之一和其他三分之二，但我似乎无法与他们一起走出 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>

renderItem 函数

    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>
    }

Answer 1

我找到的解决问题的办法其实很简单。我没有意识到 FlatList 上的默认溢出值会发生变化。将我的溢出值设置为在 FlatList 上可见解决了我的问题。

FlatList 将 PanResponder 项锁定在里面

FlatList locks PanResponder items inside

draggable

react-native

react-native-flatlist