在React Native中拖动和调整形状大小

Question

我是React-Native的新手，对于网上的所有选项感到不知所措。因此，我有点困惑如何以最佳方式完成这个任务。

我希望做出与这个相似的东西，但是用React-Native实现。一个正方形，我可以将其拖动到整个视图中，并通过拖动其角落来调整大小。我已经看过Exponent IDE和提供的ThreeView组件了，但是我认为three.js可能有些过头了，对吗？

[1]: http://codepen.io/abruzzi/pen/EpqaH

- ptrus

---

你找到任何解决方案了吗？ - Vignes

Answer 1

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链接！附注：我只进行了顶部调整。其余的需要您完成！这应该足够理解怎么做了！

- OriHero

---

点赞了。很有帮助。但是必须要调整大小。 - Vigneswaran A

我也包含了调整大小的功能！ - OriHero

嗨 @OriHero，可以帮我一下吗：https://stackoverflow.com/questions/76556614/animation-like-slack-comment-box-react-native - user2028