React Native中点击图标时阻止页面跳转的实现方案

问题背景 #

我开发了一个React Native应用，其中包含一个图标组件，点击该图标时用户会被意外跳转到其他页面，但需求是点击图标后停留在当前页面，仅触发图标的点击逻辑。

相关代码如下：

图标组件代码 #

<View>
    <Card.Actions>
        <AnimalDetail />
    </Card.Actions>
</View>

图标样式与组件实现（使用styled-components） #

export const ButtonDetail = styled.TouchableOpacity`
    background-color: ${(props) => props.theme.colors.bg.primary};
    position: absolute;
    right: 25px;
    width: 25px;
    bottom: 10px;
    z-index: 9;
`;

export const AnimalDetail = () => {
    return (
        <ButtonDetail onPress={() => console.log("Hello")}>
            <AntDesign name="twitter" size={24} color="green"></AntDesign>
        </ButtonDetail>
    );
};

页面跳转的父级组件代码 #

return (
    <TouchableOpacity
        onPress={() => navigation.navigate("groepen", { subcategories: item.id })}>
        <Spacer position="top" size="large">
            <CategoryInfoCard category={item} />
        </Spacer>
    </TouchableOpacity>
);

解决方案 #

问题的核心是点击图标时，事件会向上冒泡到父级的TouchableOpacity，从而触发页面跳转。只需在图标的点击事件中阻止事件冒泡即可解决。

修改AnimalDetail组件的onPress方法，添加事件拦截：

export const AnimalDetail = () => {
    return (
        <ButtonDetail onPress={(event) => {
            event.stopPropagation(); // 阻止事件传递到父级元素
            console.log("Hello");
        }}>
            <AntDesign name="twitter" size={24} color="green"></AntDesign>
        </ButtonDetail>
    );
};

原理说明 #

event.stopPropagation()会终止事件在组件树中的传播，阻止父级元素的事件监听器被触发。这样点击图标时，只会执行图标的onPress逻辑，父级的页面跳转逻辑不会被触发，用户将停留在当前页面。

另外，你已设置的z-index:9能确保图标组件优先捕获点击事件，无需额外调整。

内容的提问来源于stack exchange，提问作者mightycode Newton