React Native中如何阻止Detail子元素触发父元素导航事件？

这是React Native的事件冒泡导致的——子组件的点击事件会向上传递到父组件的TouchableOpacity，同时触发导航逻辑。下面是几种可行的解决方法：

方法一：在子按钮点击时阻止事件冒泡 #

直接在Detail按钮的点击回调里调用event.stopPropagation()，切断事件向上传递的路径，这样点击Detail就只会触发展开逻辑，不会触发父元素的导航。

示例代码：

import styled from 'styled-components/native';
import { TouchableOpacity, List, Text } from 'react-native-paper';
import { useState } from 'react';

const DetailButton = styled.TouchableOpacity`
  padding: 8px 16px;
  background-color: #f0f0f0;
  border-radius: 4px;
`;

const CategoryCard = ({ navigation }) => {
  const [expanded, setExpanded] = useState(false);

  const handleParentPress = () => {
    navigation.navigate('SubCategory');
  };

  const handleDetailPress = (event) => {
    // 关键：阻止事件冒泡到父元素
    event.stopPropagation();
    setExpanded(!expanded);
  };

  return (
    <TouchableOpacity onPress={handleParentPress} style={{ padding: 16, borderWidth: 1, borderRadius: 8 }}>
      <Text>分类名称</Text>
      <DetailButton onPress={handleDetailPress}>
        <Text>Detail</Text>
      </DetailButton>
      <List.Accordion
        title="详情内容"
        expanded={expanded}
        onPress={() => setExpanded(!expanded)}
      >
        <List.Item title="展开的详情项" />
      </List.Accordion>
    </TouchableOpacity>
  );
};

export default CategoryCard;

方法二：用Pressable替代TouchableOpacity #

如果styled封装的TouchableOpacity对stopPropagation支持不好，可以换成React Native原生的Pressable组件，它的事件处理更直接：

import { Pressable } from 'react-native';
import styled from 'styled-components/native';

// 用Pressable封装Detail按钮
const DetailButton = styled(Pressable)`
  padding: 8px 16px;
  background-color: #f0f0f0;
  border-radius: 4px;
`;

// 父组件中使用
<DetailButton onPress={(event) => {
  event.stopPropagation();
  setExpanded(!expanded);
}}>
  <Text>Detail</Text>
</DetailButton>

方法三：调整组件结构（规避冒泡） #

如果不想处理事件冒泡，也可以把父元素的导航逻辑从整个卡片的TouchableOpacity移到卡片内的特定区域（比如标题栏），让Detail按钮不在导航触发的范围内：

const CategoryCard = ({ navigation }) => {
  const [expanded, setExpanded] = useState(false);

  return (
    <View style={{ padding: 16, borderWidth: 1, borderRadius: 8 }}>
      {/* 只在标题区域添加导航点击 */}
      <TouchableOpacity onPress={() => navigation.navigate('SubCategory')}>
        <Text>分类名称</Text>
      </TouchableOpacity>
      <DetailButton onPress={() => setExpanded(!expanded)}>
        <Text>Detail</Text>
      </DetailButton>
      <List.Accordion
        title="详情内容"
        expanded={expanded}
        onPress={() => setExpanded(!expanded)}
      >
        <List.Item title="展开的详情项" />
      </List.Accordion>
    </View>
  );
};

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