javascript - 每当我移动到不同的标签屏幕时，它都会显示错误 "Accessing the state property of the route object is not supported"

Question

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

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"

Answer 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 中的 Main Profile 屏幕上像这样调用它。
这就是我在 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} />

希望这可以帮助。探索和自定义您的导航到您的内心内容。
祝你好运，干杯