React Native 底部导航图标点击无响应 仅边框外可触发跳转

问题根因 #

• 你在tabBarIcon中嵌套了多层可点击组件，引发触摸事件冲突：React Navigation 的 Tab 导航默认已经为tabBarIcon的外层容器绑定了跳转逻辑，你额外添加的TouchableOpacity和内层的Button均为自带触摸拦截能力的组件，且未绑定跳转逻辑，点击内层Button区域时事件会被直接吞噬，无法传递到外层导航的点击监听器。
• 你给TouchableOpacity设置了2px边框，只有点击边框所处的、未被内层Button覆盖的区域时，事件才能被外层导航捕获触发跳转，因此出现了你描述的点击异常现象。

修复方案 #

最优方案（推荐）

删除多余的TouchableOpacity外层包裹，将边框样式直接迁移到Button组件上即可，tabBarIcon的返回代码修改为：

return (
  <Button
    style={{ borderWidth: 2 }} // 边框样式移到此处
    status={color}
    appearance="ghost"
    accessoryLeft={<Icon name={iconName} />}
  />
);

如果UI库Button的默认内边距不符合你的样式预期，可在style中新增padding相关属性调整即可。

兼容方案（需保留TouchableOpacity时使用）

如果业务需求必须保留外层的TouchableOpacity，则需要手动绑定跳转逻辑，完整修改后的screenOptions代码如下：

screenOptions={({route, navigation}) => ({
  tabBarIcon: ({focused, color, size}) => {
    let iconName;

    if (route.name === 'Home') {
      iconName = focused ? 'home' : 'home';
      color = focused ? 'primary' : 'basic';
    } else if (route.name === 'Details') {
      iconName = focused ? 'search' : 'search';
      color = focused ? 'primary' : 'basic';
    }

    return (
      <TouchableOpacity 
        style={{borderWidth: 2}}
        onPress={() => navigation.navigate(route.name)} // 手动绑定跳转逻辑
      >
        <Button
          status={color}
          appearance="ghost"
          accessoryLeft={<Icon name={iconName} />}
        />
      </TouchableOpacity>
    );
  },
  tabBarActiveTintColor: 'tomato',
  tabBarInactiveTintColor: 'gray',
  tabBarShowLabel: false,
  headerShown: false,
})}

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