我正在制作一个送餐应用程序，每当我在标签栏切换到不同的屏幕时，它会显示错误
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;
My package versions:
"@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-v5
给它一个机会，干杯
1主界面索引。我有标签导航器
<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
中调用主屏幕(我有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} />
希望这对你有帮助。探索和定制您的导航到您的心的内容。祝你好运，干杯!
最简单的解决方法是去掉{route}道具，代之以useRoute钩子
https://reactnavigation.org/docs/use-route/
错误是由于包why-did-you-render在从导入中注释它之后，错误就消失了。谢谢大家的帮助和支持。