在 react-native 中拖动形状并调整其大小
Posted
技术标签:
【中文标题】在 react-native 中拖动形状并调整其大小【英文标题】:drag and resize a shape in react-native 【发布时间】:2017-06-17 03:14:21 【问题描述】:我是 react-native 新手,对 www 中的所有选项感到不知所措。这就是为什么我有点困惑如何以最好的方式完成这项任务。
我想做一些类似于 this 的东西,但是在 react-native 中。一个正方形,我可以在整个视图中拖动它+通过拖动它的角来调整它的大小。我已经查看了指数 IDE 和给定的 ThreeView-Component,但我认为 three.js 对于这项任务来说有点过头了,对吧?
[1]: http://codepen.io/abruzzi/pen/EpqaH
【问题讨论】:
你找到解决办法了吗? 【参考方案1】: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 中拖动形状并调整其大小的主要内容,如果未能解决你的问题,请参考以下文章