在 React Native 中创建一个可拖动、可调整大小的框

Question

我已经四处寻找一种方法来创建具有可拖动和可调整大小功能的视图。我已经接近了

react-native-gesture-handler

包，但可调整大小的角落是我感到困惑的地方。

<PanGestureHandler
                onGestureEvent={this._onDragGestureEvent}
                onHandlerStateChange={this._onDragHandlerStateChange}
            >
                <Animated.View style={styles.wrapper}>
                    <RotationGestureHandler
                        ref={this.rotationRef}
                        simultaneousHandlers={this.pinchRef}
                        onGestureEvent={this._onRotateGestureEvent}
                        onHandlerStateChange={this._onRotateHandlerStateChange}>
                        <Animated.View style={styles.wrapper}>
                            <PinchGestureHandler
                                ref={this.pinchRef}
                                simultaneousHandlers={this.rotationRef}
                                onGestureEvent={this._onPinchGestureEvent}
                                onHandlerStateChange={this._onPinchHandlerStateChange}>
                                <Animated.View collapsable={false}>
                                    <Image background={true} width={Dimensions.get('window').width}
                                           source={{ uri: `<BACKGROUND IMAGE>` }}
                                           defaultSource={require('../../assets/icon.png')}>
                                        <Animated.View
                                            style={[
                                                styles.box,
                                                {
                                                    width: this.state.boxWidth,
                                                    height: this.state.boxHeight,
                                                    transform: [
                                                        { perspective: 200 },
                                                        { scale: this._scale },
                                                        { rotate: this._rotateStr },
                                                        { rotateX: this._tiltStr },
                                                        { translateX: this._translateX },
                                                        { translateY: this._translateY }
                                                    ],
                                                },
                                            ]}
                                        />
                                    </Image>
                                </Animated.View>
                            </PinchGestureHandler>
                        </Animated.View>
                    </RotationGestureHandler>
                </Animated.View>
            </PanGestureHandler>

我的问题是有人曾经遇到过或者有 React Native 中可调整大小的角手柄的示例吗？

Answer 1

检查这个：

https://github.com/brucelin0325/react-native-ressized-flex-panes/blob/master/Mycomponent.js

我猜 componentWillMount() 会对你有帮助吗？

Answer 2

试试这个。

import React, { useRef, useState } from 'react';
import { Animated, PanResponder, View } from 'react-native';

const DragableCorner = () => {
  const [initialHeight, setInitialHeight] = useState(100);
  const lastHeight = useRef(initialHeight); // Store the last height
  const animatedHeight = useRef(new Animated.Value(initialHeight)).current;

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true, // Ensure it captures move gestures
      onPanResponderMove: (_, gestureState) => {
        // Update animated height based on the last height and the change in y-direction
        const newHeight = lastHeight.current + gestureState.dy;
        animatedHeight.setValue(newHeight);
      },
      onPanResponderRelease: (_, gestureState) => {
        // Update the last height on release
        const newHeight = lastHeight.current + gestureState.dy;
        lastHeight.current = newHeight;
        setInitialHeight(newHeight); // Optionally update initialHeight if needed
      },
      onPanResponderTerminationRequest: () => false, // Prevent other components from becoming the responder
    })
  ).current;

  return (
    <View style={{ flex: 1, backgroundColor: 'transparent' }}>
      <Animated.View
        style={{ height: animatedHeight, backgroundColor: 'skyblue', flex: 1 }}
      >
        {/* Content */}
      </Animated.View>
      <View style={{ height: 10, backgroundColor: 'blue' }} {...panResponder.panHandlers} />
    </View>
  );
};

export default DragableCorner;