react-native - 为什么 tabBarIcon 无法导航到 Tab.Screen 中的组件？

Question

在构建自定义 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>
    ),
  }}
/>

当我省略选项时:

<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

将此作为答案，希望它能对其他人有所帮助。睡完之后我检查了我的Tab.Screen再次，我想起了TouchableOpacity要工作它需要一个 onPress尽管我认为 parent 会负责导航，但事实并非如此。

虽然这个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>
    ),
  })}
/>