我是React-Native的新手,对于网上的所有选项感到不知所措。因此,我有点困惑如何以最佳方式完成这个任务。
我希望做出与这个相似的东西,但是用React-Native实现。一个正方形,我可以将其拖动到整个视图中,并通过拖动其角落来调整大小。我已经看过Exponent IDE和提供的ThreeView组件了,但是我认为three.js可能有些过头了,对吗?
[1]: http://codepen.io/abruzzi/pen/EpqaH
我是React-Native的新手,对于网上的所有选项感到不知所措。因此,我有点困惑如何以最佳方式完成这个任务。
我希望做出与这个相似的东西,但是用React-Native实现。一个正方形,我可以将其拖动到整个视图中,并通过拖动其角落来调整大小。我已经看过Exponent IDE和提供的ThreeView组件了,但是我认为three.js可能有些过头了,对吗?
[1]: http://codepen.io/abruzzi/pen/EpqaH
react-native-gesture-handler
是您的情况下最合适的东西。我在 snack 中创建了一个最小示例。这是最小代码:
let FlatItem = ({ item }) => {
let translateX = new Animated.Value(0);
let translateY = new Animated.Value(0);
let height = new Animated.Value(20);
let onGestureEvent = Animated.event([
{
nativeEvent: {
translationX: translateX,
translationY: translateY,
},
},
]);
let onGestureTopEvent = Animated.event([
{
nativeEvent: {
translationY: height,
},
},
]);
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);
}
};
return (
<View>
<PanGestureHandler onGestureEvent={onGestureTopEvent}>
<Animated.View
style={{
widht: 10,
height,
backgroundColor: 'blue',
transform: [{ translateX }, { translateY }],
}}
/>
</PanGestureHandler>
<PanGestureHandler
onGestureEvent={onGestureEvent}
onHandlerStateChange={onHandlerStateChange}>
<Animated.View
style={[
styles.item,
{ transform: [{ translateX }, { translateY }] },
]}>
<Text>{item.id}</Text>
</Animated.View>
</PanGestureHandler>
</View>
);
};
let data = [
{ key: 1, id: 1 },
];
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<FlatItem item={data[0]} />
</View>
);
}
}
如果你想测试,这里是snack链接!附注:我只进行了顶部调整。其余的需要您完成!这应该足够理解怎么做了!