>我正在努力为我的 React-Native 应用程序创建一个要求,其中我有一个空白的保管箱(在删除平面列表项目时,它应该转换为可拖动的平面列表(和一个可拖动的平面列表,我必须从那里拖放到空白的放置框,反之亦然。
两个平面列表中的项目在单击时都应该有一个右侧菜单,该菜单应显示移动到另一个平面列表中的项目的选项。
我知道这是一个非常常见的场景,但由于我对 React-Native 很陌生,所以我正在努力获得任何库或自己创建相同的库。
我正在使用 React-Native 和 Redux 和 Typescript
我正在使用 react-native-draggable-flatlist for Flatlist(https://github.com/computerjazz/react-native-draggable-flatlist(,如果有更好的选择
我已经创建了最小的示例react-native-gesture-handler
让我知道它是否有帮助:
let dropzoneHeight = 200;
let itemHeight = 60;
let FlatItem = ({ item }) => {
let translateX = new Animated.Value(0);
let translateY = new Animated.Value(0);
let onGestureEvent = Animated.event([
{
nativeEvent: {
translationX: translateX,
translationY: translateY,
},
},
]);
let _lastOffset = { x: 0, y: 0 };
let onHandlerStateChange = event => {
if (event.nativeEvent.oldState === State.ACTIVE) {
_lastOffset.x += event.nativeEvent.translationX;
_lastOffset.y += event.nativeEvent.translationY;
translateX.setOffset(_lastOffset.x);
translateX.setValue(0);
translateY.setOffset(_lastOffset.y);
translateY.setValue(0);
//TODO here you have to check if the item is inside of container and if it is do some calculations to relocate it to your container.
}
};
return (
<PanGestureHandler
onGestureEvent={onGestureEvent}
onHandlerStateChange={onHandlerStateChange}>
<Animated.View
style={[styles.item, { transform: [{ translateX }, { translateY }] }]}>
<Text>{item.id}</Text>
</Animated.View>
</PanGestureHandler>
);
};
let data = [
{ key: 1, id: 1 },
{ key: 2, id: 2 },
{ key: 3, id: 3 },
{ key: 4, id: 4 },
];
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<FlatList
data={data}
ListHeaderComponent={() => <View style={styles.dropzone} />}
renderItem={props => <FlatItem {...props} />}
style={{ flex: 1 }}
/>
</View>
);
}
}
如果您想测试,这里是零食!
使用来自react-native-reanimated
的声明性 API 的更高性能的方式
<FlatList data={new Array(10).fill(0)}
renderItem={({item, index}) => <GestureItem key={index} item={item} />}
/>
const GestureItem = ({item})=> {
const safex = new A.Value(0)
const safeY = new A.Value(0)
const draX = new Value(0)
const dragY = new Value(0)
const panState = new Value(State.UNDETERMINED)
const onGestureEvent = A.event([
{
nativeEvent: {
translationX: dragX,
translationY: dragY,
state: panState,
},
},
]);
const transX = cond(
eq(panState, State.ACTIVE),
dragX,
set(safeX, add(safeX, dragX))
);
const transY = cond(
eq(panState, State.ACTIVE),
dragY,
set(safeY, add(safeY, dragY))
);
return (
<PanGestureHandler
onGestureEvent={onGestureEvent}
onHandlerStateChange={onGestureEvent}>
<A.View style={{width: 100, height : 100, transform :[{translateX: transX}, {translateY: transY}]}} >
</A.View>
</PanGestureHandler>
)
}
要交换列表项及其索引,请使用Code
组件