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

Question

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

我定义了一个名为 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”。

您有一个名为“TrackerSettings”的屏幕吗？

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

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

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 导致问题的原因以及如何解决此问题的见解，以便我可以使用自定义选项卡按钮组件。任何有关正确实施的帮助或指导将不胜感激。谢谢你。

Answer 1

正如您所说，您收到以下错误： 任何导航器均未处理带有有效负载 {"name":"TrackerSetttings"} 的操作“NAVIGATE”。

所以，根据你的代码片段，我猜这是一个错字。尝试将您的名称值更改为“TrackerSetttings”而不是“Tracker Setttings”，看看它是否有效 -

<HomeStack.Screen
    name="TrackerSetttings"
    children={() => <TrackerSettings user={user} />}
    options={({ navigation }) => ({
      title: "Velg lokasjon",
   })}
/>