我正在使用此库react-native-draggable-flatlist。 我在这个无法拖动的可拖动平面列表中有ScrollView。 当我切换到draggableFlatList到FlatList并删除TouchableOpacity时,它可以工作。但是我想使用这个可拖动的平面列表!
它不会水平滚动。但是,如果我切换到FlatList,它会起作用(非常慢)。
import React, { Component } from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';
const exampleData = [...Array(20)].map((d, index) => ({
key: `item-${index}`, // For example only -- don't use index as your key!
label: index,
backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${index *
5}, ${132})`,
}));
class Example extends Component {
state = {
data: exampleData,
};
renderItem = ({ item, index, drag, isActive }) => {
return (
<TouchableOpacity
style={{
height: 100,
backgroundColor: isActive ? 'blue' : item.backgroundColor,
alignItems: 'center',
justifyContent: 'center',
}}
onLongPress={drag}>
<Text
style={{
fontWeight: 'bold',
color: 'white',
fontSize: 32,
}}>
{item.label}
</Text>
</TouchableOpacity>
);
};
renderHorizontalItem = () => {
return (
<View style={{ flex: 1 }}>
<FlatList
horizontal
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => `draggable-item-${item.key}`}
onDragEnd={({ data }) => this.setState({ data })}
/>
</View>
);
};
render() {
return (
<View style={{ flex: 1 }}>
<DraggableFlatList
data={this.state.data}
renderItem={this.renderHorizontalItem}
keyExtractor={(item, index) => `draggable-item-${item.key}`}
onDragEnd={({ data }) => this.setState({ data })}
/>
</View>
);
}
}
export default Example;