У меня есть FlatList, который содержит множество перетаскиваемых элементов, использующих PanResponder. Элементы просто перетаскиваются и не имеют никаких проблем, кроме того, что они «заблокированы» в области, в которой находится FlatList. Только FlatList составляет около трети ширины экрана, и я хочу, чтобы они могли перетаскивать эти элементы из этой трети и в другие две трети, но я не могу выйти за пределы FlatList с ними. Если я удаляю FlatList, все работает так, как я хочу, кроме возможности прокручивать элементы.
Я не уверен, что я что-то упускаю с точки зрения того, почему они заблокированы внутри FlatList или есть другой подход, который был бы лучше. Будем благодарны за любые идеи о том, как разрешить перетаскивание этих элементов за пределы FlatList.
Main Render
<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>
}