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

Posted 2023-05-08

【中文标题】在 React Native 中创建一个可拖动、可调整大小的框

【英文标题】：Create a draggable, re-sizable box in 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 中可调整大小的角手柄的示例？

【问题讨论】：

你有什么解决办法吗？

【参考方案1】：

检查一下：

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

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

【讨论】：

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