在 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 中拖动形状并调整其大小的主要内容,如果未能解决你的问题,请参考以下文章

如何在android中动态地使形状可拖动和调整大小

如何在 PyQt5 中通过拖放来绘制矩形并调整其形状

cdr调整文本框行距?

Java swing拖放记事本[关闭]

拖动 QML 形状的坐标

React-Native 应用程序的可折叠和可拖动部分列表