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

Question

构建自定义 Tab.Screen 时，我尝试传递自定义 tabBarIcon。当图标呈现时，它不会导航到组件 TestScreen。在docs for 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 应该在导航器或组上传递。我试着看看能不能找到类似的问答：

React native react-navigation tabBarIcon does not display
Why Is My Component not Rendering Within my Tab.Screen?

但是我看不出我的错误在哪里。

我当前的依赖项：

"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"
},

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

Answer 1

你的 TouchableOpacity 与 React 导航内部按下处理程序重叠，只需用 View

包裹你的图标

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

Answer 2

留下这个作为答案，希望它能帮助其他人。在睡觉之后，我再次检查了我的 Tab.Screen，我记得要让 TouchableOpacity 工作，它需要一个 onPress，尽管我认为 parent 会负责导航但事实并非如此。

虽然这个有点准确，但删除 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>
    ),
  })}
/>

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

Why does tabBarIcon not navigate to my component in my Tab.Screen?

react-native

react-navigation

expo

react-navigation-v6