如何使用 react-native-gesture-handler 将大小匹配到 children

Question

我正在尝试使用 react-native-gesture-handler 创建一个可拖动、可缩放和可旋转的组件。这是我第一次尝试 react-native-gesture-handler，所以我不确定这是否是预期的行为，因为手势触发器需要 hitboxes。

所以我嵌套了一些 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>

结果：

Answer 1

我发现使用 alignSelf: 'center' 可以使红色与 child 大小相同。但为什么对齐决定 parent 大小？

如何使用 react-native-gesture-handler 将大小匹配到 children

How to match size to children using react-native-gesture-handler

javascript

react-native

react-native-gesture-handler