Pressables - 嵌套，通过子级，并在绝对定位的其他对象旁边。不能按小孩可按的东西

Question

对于所有印刷机，我都使用该组件。

我有几个卡片形式的组件，其中一些上面有按钮。其中大多数本身都是可选按钮，但我已经让 IconButton 组件通过在按下函数中使用 event.stopPropagation() 来处理嵌套。

我还有一个包装组件，可以翻转所包含的卡片并在背面显示额外的信息，该卡片本身也是可按下的，并且有一个按钮绝对位于角落。

我的问题是我的一张卡是数字输入卡，它具有递增和递减图标按钮，但是当我用翻转器包裹它时，这些按钮没有被按下。从压力机记录，我已经确定压力动作将进入 CardFlipper 的可压主体，虽然我通过简单地将压力机从子设备移动到翻转器来解决卡压力要求，但我无法对我的数字做同样的事情输入卡。

样式问题：没有任何可按下的按钮会随着 zIndex 值升高或降低，并且只有翻转包装器上的翻转按钮使用 的 hitSlop 值，因为它们是小按钮。此外，翻转包装器使用react-native-reanimated来动画翻转运动，但身体的可压包装动画视图，而不是相反。

图标按钮渲染

return (
        <View style={[styles.container, style, {
            borderWidth: borderless ? 0 : StyleSheet.hairlineWidth,
            height: defaultedFontSize + 20
        }]}>
            <Pressable
                style={[styles.press, { padding: pressPadding }]}
                onPress={event => {
                    event.stopPropagation();
                    onPress();
                }}
                onLongPress={event => {
                    event.stopPropagation();
                    onLongPress && onLongPress();
                }}
                android_ripple={{
                    color: iconColor,
                    borderless: false
                }}
                disabled={disabled}
                hitSlop={hitSlop}
            >
                <MaterialCommunityIcons name={icon} size={defaultedFontSize} color={iconColor} />
                {name ? <ShowcardGothic.Text style={[styles.text, { fontSize: textFontSize }]}>{name}</ShowcardGothic.Text> : null}
            </Pressable>
        </View>
    );

TextInputCard 渲染

return (
        <Pressable
            style={styles().container}
            onPress={onPress}
            onLongPress={onLongPress}
        >
            <View style={styles().header}>
                <ShowcardGothic.Text>{name}</ShowcardGothic.Text>
            </View>
            <View style={styles().contentContainer}>
                <IconWindow icons={getDigitalIcons()} squeeze />
                <Vertical width={5} />
                <View style={styles().description}>
                    <IconButton icon="minus-thick" onPress={() => decrement()} onLongPress={() => decrement(10)} />
                    <Horizontal width={20} />
                    <IconButton icon="plus-thick"  onPress={() => increment()} onLongPress={() => increment(10)} />
                </View>
            </View>
        </Pressable>
    );

CardFlipper 渲染

return (
        <Pressable onPress={onPress} onLongPress={onLongPress}>
            <Animated.View style={[styles(defaultedScale).flipperFront, frontAnimatedStyle]}>
                {children}
                <IconButton
                    icon="arrow-u-left-bottom-bold"
                    style={{
                        position: 'absolute',
                        top: cardHeight * defaultedScale - 30,
                        left: cardWidth * defaultedScale - 30
                    }}
                    fontSize={14}
                    onPress={() => flip.value = (flip.value + 1) % 2}
                    borderless
                />
            </Animated.View>
            <Animated.View style={[styles(defaultedScale).flipperBack, backAnimatedStyle]}>
                {typeof back === 'string' ? (
                    <ShowcardGothic.Text adjustsFontSizeToFit>{back}</ShowcardGothic.Text>
                ) : back}
                <IconButton
                    icon="arrow-u-right-bottom-bold"
                    style={{
                        position: 'absolute',
                        top: cardHeight * defaultedScale - 30,
                        right: cardWidth * defaultedScale - 30
                    }}
                    fontSize={14}
                    onPress={() => flip.value = (flip.value + 1) % 2}
                    hitSlop={10}
                    borderless
                />
            </Animated.View>
        </Pressable>
    );

我尝试将 event.stopPropagation() 放在所有可按的 onPresses 和 onLongPresses 上。此外，我尝试将可按下的内容放入动画视图内部而不是外部，但这两种更改都没有影响输出。

我还尝试用片段替换脚蹼的可按视图，达到相同的效果，但是没有外部 onPress 被调用。

在将翻转功能转变为包装组件以实现可重用性之前，我将其放在一个更基本的卡片组件中，但我宁愿使用翻转包装器，而不是手动为我想要翻转的每张卡片设置动画。

其他注意事项： ShowcardGothic 是一个提供同名字体的文本包装器 React Native 版本为 0.73.0，React 为 18.2.0，reanimated 为 ^3.6.1；最近创建的项目

Answer 1

我后来发现，在注释掉动画卡back侧的翻转按钮后。这样做表明，根本原因实际上是后视图在前视图上分层，并且我已通过向动画样式添加 zIndex 参数来纠正它，以将正面保持在顶部