自定义 tabBarButton：React Navigation 中的组件导航

问：

我在 React Navigation 应用程序中遇到了自定义选项卡按钮组件的问题。

我定义了一个名为 CustomTabBarButton 的自定义选项卡按钮组件，我想将其用作特定 Tab.Screen 选项卡栏中的按钮。但是，当我将其包含在 Tab.Screen 的选项中时，我遇到了一个问题

import CustomTabBarButton from "../CustomTabBarButton/CustomTabBarButton";

///

<Tab.Screen
  name="AddButton"
  children={() => <HomeStackScreen user={user} />}
  options={{
    tabBarLabel: "",
    tabBarIcon: ({ focused }) => (
      <Image
        source={imageUrl}
        resizeMode="contain"
        style={{
          width: 70,
          height: 70,
          backgroundColor: "#373737",
          borderRadius: 100,
        }}
      />
    ),
    tabBarButton: () => (<CustomTabBarButton navigation={navigation} setScreen={setScreen} />)
  }}
/>

我在控制台中收到以下错误： 有效负载为 {“name”：“TrackerSetttings”} 的操作“NAVIGATE”未由任何导航器处理。

你有一个名为“TrackerSetttings”的屏幕吗？

如果您尝试导航到嵌套导航器中的屏幕，请参阅 https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。

在同一文件中，TrackerSetttings 按以下方式定义：

function HomeStackScreen({ navigation, user, backgroundColor }) {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Tracker Setttings"
        children={() => <TrackerSettings user={user} />}
        options={({ navigation }) => ({
          title: "Velg lokasjon",
        })}
      />

问题是当我在选项中包含tabBarButton时，它不起作用。但是，当我删除它时，如下图所示，它按预期工作。

<Tab.Screen
  name="AddButton"
  children={() => <HomeStackScreen user={user} />}
  options={{
    tabBarLabel: "",
    tabBarIcon: ({ focused }) => (
      <Image
        source={imageUrl}
        resizeMode="contain"
        style={{
          width: 70,
          height: 70,
          backgroundColor: "#373737",
          borderRadius: 100,
        }}
      />
    )
  }}
/>

我正在寻找有关tabBarButton导致问题的原因以及如何解决此问题的见解，以便我可以使用我的自定义选项卡按钮组件。任何关于正确实施的帮助或指导将不胜感激。谢谢。