我正在尝试使用 react-native-gesture-handler 创建一个可拖动、可扩展和可旋转的组件。这是我第一次尝试 react-native-gesture-handler，所以我不确定这是否是由于手势触发所需的命中框而导致的预期行为。
所以我嵌套了一些GestureHandlers来实现所有三种行为，但我的最终<Animated.View>占据了全屏宽度。我希望红色区域仅覆盖children. 这是一个问题，因为旋转和缩放是基于红色区域的中心，所以锚点在错误的位置。
可拖动：
render() {
return (
<PanGestureHandler
ref={this.posRef}
onGestureEvent={this._onGestureEvent}
onHandlerStateChange={this._onPosHandlerStateChange}
minPointers={1}
maxPointers={1}
>
<Animated.View>
<RotationGestureHandler
ref={this.rotationRef}
simultaneousHandlers={[this.pinchRef, this.posRef]}
onGestureEvent={this._onRotateGestureEvent}
onHandlerStateChange={this._onRotateHandlerStateChange}
minPointers={2}
maxPointers={2}
>
<Animated.View>
<PinchGestureHandler
ref={this.pinchRef}
simultaneousHandlers={[this.rotationRef, this.posRef]}
onGestureEvent={this._onPinchGestureEvent}
onHandlerStateChange={this._onPinchHandlerStateChange}
minPointers={2}
maxPointers={2}
>
<Animated.View collapsable={false} style={{
transform: [
{ translateX: this._translateX },
{ translateY: this._translateY },
{ scale: this._scale },
{ rotate: this._rotateStr },
],
backgroundColor: 'red', // <-- HERE
}}>
{this.props.children}
</Animated.View>
</PinchGestureHandler>
</Animated.View>
</RotationGestureHandler>
</Animated.View>
</PanGestureHandler>
);
}
用法：
<Draggable>
<View style={{ width: 100, height: 100, backgroundColor: 'blue' }}/>
</Draggable>
结果是：
