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

时间:2019-05-23 19:25:47

标签: javascript react-native draggable resizable

我一直在寻找一种创建具有可拖动和可调整大小功能的视图的方法。我已经接近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 个答案:

答案 0 :(得分:1)