平面列表将PanResponder项目锁定在里面



我有一个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>
    }

我找到的解决问题的方法实际上非常简单。我没有意识到默认溢出值在平面列表上发生了变化。将我的溢出值设置为在平面列表上可见解决了我的问题。

最新更新