我是 react-native 的新手,对 www 中的所有选项感到不知所措。这就是为什么我对如何以最佳方式完成这项任务感到有些困惑。
我想做类似 this 的东西,但在 native react 中。一个正方形,我可以在整个 View 中拖动它并通过拖动它的角来调整它的大小。我已经研究了指数 IDE 和给定的 ThreeView-Component,但我认为 Three.js 对这项任务来说有点过头了,对吧?
[1]: http://codepen.io/abruzzi/pen/EpqaH
最佳答案
react-native-gesture-handler
是最适合您的情况。我在零食中创建了最小的例子。这是最小的代码:
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如果要测试,请链接! PS:我只做了顶部调整大小。剩下的就交给你了!了解它的方法应该就足够了!
关于react-native - 在 react-native 中拖动形状并调整其大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41961736/