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

【问题标题】：Create a draggable, re-sizable box in React Native在 React Native 中创建一个可拖动、可调整大小的框
【发布时间】：2019-10-10 09:58:06
【问题描述】：

我一直在寻找一种方法来创建具有可拖动和可调整大小功能的视图。我已经接近 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 中可调整大小的角手柄的示例？

【问题讨论】：

你有什么解决办法吗？

标签： javascript react-native draggable resizable

【解决方案1】：

检查一下：

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

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

【讨论】：

感谢您的回复，这可能会有所帮助。解决后我会发布答案。