为什么Tab.Screen自定义tabBarIcon点击无法跳转至对应组件？

问题原因 #

你在tabBarIcon返回的节点外层额外包裹了TouchableOpacity，React Navigation 的底部Tab组件本身已经为每个Tab项的外层封装了自带点击跳转逻辑的可交互容器，你自定义的TouchableOpacity会消费点击事件，导致外层的默认跳转逻辑无法被触发。

修复方案 #

直接去掉tabBarIcon内部的TouchableOpacity即可，修改后的代码如下：

<Tab.Screen
  name={routes.FOO}
  component={TestScreen}
  options={{
    tabBarIcon: ({ focused }) => (
      <View style={styles.actionButton}>
        <Image source={plus} style={styles.imageIcon} />
      </View>
    ),
  }}
/>

如果有自定义点击事件的需求（比如点击前加校验、埋点等），不要在tabBarIcon里加点击容器，而是通过tabBarButton配置项实现，记得把原有props透传保证默认跳转逻辑正常：

<Tab.Screen
  name={routes.FOO}
  component={TestScreen}
  options={{
    tabBarIcon: ({ focused }) => (
      <View style={styles.actionButton}>
        <Image source={plus} style={styles.imageIcon} />
      </View>
    ),
    tabBarButton: (props) => (
      <TouchableOpacity
        {...props}
        onPress={() => {
          // 此处可添加自定义逻辑，比如埋点、跳转校验
          console.log('点击了自定义Tab')
          // 调用原有onPress保证默认跳转逻辑正常执行
          props.onPress()
        }}
      />
    )
  }}
/>

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ