每当我移动到不同的选项卡屏幕时，它都会显示错误“不支持访问路由对象的状态属性”

Posted 2023-02-21

【中文标题】每当我移动到不同的选项卡屏幕时，它都会显示错误“不支持访问路由对象的状态属性”

【英文标题】：Whenever I am moving to different tab screens it shows the error "Accessing the state property of the route object is not supported"

【发布时间】：2021-11-10 05:24:57

【问题描述】：

每当我切换到标签栏中的不同屏幕时，我正在制作一个送餐应用程序，它会显示错误

Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the 'getFocusedRouteNameFromRoute' helper instead:

错误提示我去以下链接react-navigation

这是我的 MainTabScreen 的代码，其中包含选项卡导航器

const Tab = createBottomTabNavigator();

const tabOptions = 
  activeTintColor: "red",
  inactiveTintColor: "black",

  showLabel: false,
;
const MainTabScreen = () => 

  return (
    <Tab.Navigator tabOptions=tabOptions>
      <Tab.Screen
        name="MainHome"
        component=MainHomeScreen
        options=
          tabBarIcon: () => (
             <Icon.Home color=color height=28 width=28 />
          ),
        
      />
      <Tab.Screen
        name="MainCart"
        component=MainCartScreen
        options=
          tabBarIcon: () => (
            <Icon.ShoppingCart color=color width=28 height=28 />
          ),
        
      />
      <Tab.Screen
        name="MainProfile"
        component=MainProfileScreen
        options=
          tabBarIcon: () => (
             <Icon.User color=color height=28 width=28 />
          ),
        
      />
    </Tab.Navigator>
  );
;

export default MainTabScreen;

我的 MainHomeScreen、MainCartScreen 和 MainProfileScreen 看起来与此类似

const Stack = createStackNavigator();
const MainProfileScreen = () => 
  return (
    <Stack.Navigator screenOptions= headerShown: false >
      <Stack.Screen name="Profile" component=ProfileScreen />
      <Stack.Screen name="SettingsScreen" component=SettingsScreen />
    </Stack.Navigator>
  );
;

export default MainProfileScreen;

我的包版本：

    "@react-navigation/bottom-tabs": "^5.11.15",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.14.9",
    "@twotalltotems/react-native-otp-input": "^1.3.5",
    "dayjs": "^1.10.6",
    "expo": "~42.0.1",
    "expo-firebase-recaptcha": "^1.4.2",
    "expo-font": "~9.2.1",
    "expo-location": "~12.1.2",
    "expo-notifications": "~0.12.3",
    "expo-secure-store": "~10.2.0",
    "expo-status-bar": "~1.0.4",
    "firebase": "^8.2.3",
    "lottie-react-native": "4.0.2",
    "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-feather": "^1.1.2",
    "react-native-form-select-picker": "^0.0.12",
    "react-native-input-spinner": "^1.7.11",
    "react-native-screens": "~3.4.0",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.6.2",
    "react-redux": "^7.2.5",
    "recyclerlistview": "^3.0.5",
    "redux": "^4.1.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "reselect": "^3.0.1"

【问题讨论】：

请添加更多代码，尝试添加有错误的屏幕代码

您能否向我们提供您正在使用的软件包的版本？例如。 @react-navigation/native@react-navigation/stack等等？

顺便说一句。你的链接将我重定向到about:blank#blocked

@Elias 感谢您的反馈伙伴。我已经编辑了问题。

我不太确定为什么会这样，您能否在 snack.expo.dev 之类的内容上创建一个可重现的示例。

【参考方案1】：

我使用相同的逻辑，这种实现方式对我来说很好，

我正在使用 react-navigation-v5

试一试，干杯

我 MainScreen index.tsx 我有标签导航器

      <Tab.Navigator
    sceneContainerStyle= backgroundColor: Theme.colors.white 
    initialRouteName="Profile"
    screenOptions=( route ) => (
      tabBarIcon: ( color, size ) => 

        if (route.name === 'Profile') 
          return <AntDesign name="profile" size=size color=color />
        
        if (route.name === 'Settings') 
          return <FontAwesome5 name="settings" size=size color=color />
        
      ,
    )
    tabBarOptions=
      activeTintColor: Theme.colors.blue,
      inactiveTintColor: Theme.colors.greyShade2
    
  >
    <Tab.Screen name="Profile" component=ProfileScreen />
    <Tab.Screen name="Profile" component=SettingsScreen />

  </Tab.Navigator>

并在 Stack.screen 的主配置文件屏幕上这样称呼它。 这就是我在 Stack 中调用 MainScreen（我有 Tab 导航器的地方）的方式

          <Stack.Screen
        name="MainScreen"
        options=( route, navigation ) => 
          const focusedRoute = getFocusedRouteNameFromRoute(route) || 'Profile'
          return 
            cardStyle:  backgroundColor: Theme.colors.white ,
            title: focusedRoute,
            headerTitleAlign: 'left',
            headerStyle: 
              height: Platform.OS === 'ios' ? Constants.statusBarHeight + 68 : 68
            ,
            headerTitle: () => 
              if (focusedRoute === 'Profile') 
                return (
                  <Div row alignItems='center'>
                    <YourLogo />
                    <Text>Your header title</Text>
                  </Div>
                )
              
              return <Text ml="lg" fontFamily="Gilroy-ExtraBold" fontSize=18>focusedRoute</Text>
            ,
            headerRight: () => 
              if (focusedRoute === 'Profile') 
                return (
                  <Div mr="lg">
                    <TouchableOpacity style= padding: 10  onPress=() => navigation.navigate('SettingsScreen')>
                      <SettingsIcon />
                    </TouchableOpacity>
                  </Div>
                )
              
              return null
            
          
        
        component=MainScreen />

希望这会有所帮助。探索和定制您的导航，让您心满意足。 祝你好运，干杯

【讨论】：

如何实现headerShown: false？

我在 Stack.Screen options=( route ) => const routeName = getFocusedRouteNameFromRoute(route) switch (routeName) case 'LandingScreen': return ( swipeEnabled: false, headerShown: false ) case 'LoginScreen': return ( swipeEnabled: false, headerShown: false ) default: return ( headerShown: false ) 987654324@

【参考方案2】：

最简单的解决办法是去掉prop route 并用钩子useRoute替换

https://reactnavigation.org/docs/use-route/

【讨论】：

你能提供一些代码伙伴吗？

@AyushKumar 他们在谈论这个：reactnavigation.org/docs/use-route

是的，他们建议我使用 useRoute 但我的错误提示我去reactnavigation.org/docs/screen-options-resolution

是的，但是那个网站上有代码。

【参考方案3】：

错误是由于包 why-did-you-render 在从导入中注释它之后错误消失了。感谢大家的帮助和支持。