自定义tabBarButton:React导航中的组件导航

jutyujz0  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(131)

我在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”:“TrackerSettings”}的操作“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导致问题,以及如何解决这个问题,这样我就可以使用我的自定义选项卡按钮组件。任何帮助或指导正确的实施将不胜感激。谢谢。

ejk8hzay

ejk8hzay1#

正如你所说,你得到了以下错误:操作'NAVIGATE'与有效负载{“name”:“TrackerSettings”}没有被任何导航器处理。
所以,根据你的代码片段,我猜这是一个错字。尝试将你的名字的值更改为“TrackerSettings”而不是“Tracker Settings”,看看它是否有效-

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

字符串

相关问题