为什么 tabBarIcon 不能导航到我的 Tab.Screen 中的组件？答案

【问题标题】：Why does tabBarIcon not navigate to my component in my Tab.Screen?为什么 tabBarIcon 不能导航到我的 Tab.Screen 中的组件？
【发布时间】：2021-10-25 14:21:26
【问题描述】：

在构建自定义 Tab.Screen 时，我尝试传递自定义 tabBarIcon。当图标呈现时，它不会导航到组件TestScreen。在docs 对tabBarIcon 我的理解中Tab.Screen 应该写成：

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

当我省略 options:

<Tab.Screen
  name={routes.FOO}
  component={TestScreen}
/>

onClick 在单击时呈现组件。当我阅读Options for screens 的文档时，它提到screenOptions 应该在导航器或组上传递。我试着看看能不能找到类似的问答：

但我无法看到我的错误在哪里。

我目前的依赖：

"dependencies": {
  "@react-navigation/bottom-tabs": "^6.0.5",
  "@react-navigation/native": "^6.0.2",
  "expo": "~42.0.1",
  "expo-status-bar": "~1.0.4",
  "react": "16.13.1",
  "react-dom": "16.13.1",
  "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
  "react-native-gesture-handler": "^1.10.3",
  "react-native-safe-area-context": "3.2.0",
  "react-native-screens": "~3.4.0",
  "react-native-web": "~0.13.12"
},
"devDependencies": {
  "@babel/core": "^7.9.0"
},

如何让我的自定义图标呈现并导航到正确的组件？

【问题讨论】：

标签： react-native expo react-navigation react-navigation-v6

【解决方案1】：

将此作为答案，希望它可以帮助其他人。睡在上面之后，我再次检查了我的Tab.Screen，我记得要使用TouchableOpacity，它需要onPress，尽管我认为父母会负责导航，但事实并非如此。

虽然这个answer 有点准确，但删除TouchableOpacity 后，图标会起作用，代码：

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

但它违背了自定义按钮和不透明度更改的目的。在仔细观察options 之后，我想知道如果我将navigation 传递给onPress 并使用navigate 会怎样？

效果很好，我只剩下：

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

【讨论】：

【解决方案2】：

您的 TouchableOpacity 与反应导航内部新闻处理程序重叠，只需用 View 包裹您的图标

如果您想自定义标签图标的按下行为，请将侦听器对象传递给listener props https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen

【讨论】：