TypeError：未定义不是一个对象（评估'state.routes.find'）

Question

使用createMaterialBottomTabNavigator， 它在Tab.Navigator 处有组件异常 并且消息是 TypeError: undefined is not an object (evalating 'state.routes.find') 导致组件异常的部分是@react-navigation/routers/src/TabRouter.tsx。

但即使我看了也无法理解。

package.json

{
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject"
    },
    "dependencies": {
        "@react-native-community/datetimepicker": "3.0.0",
        "@react-native-community/hooks": "^2.6.0",
        "@react-native-community/masked-view": "0.1.10",
        "@react-native-community/picker": "^1.8.0",
        "@react-native-firebase/admob": "^7.6.9",
        "@react-native-firebase/app": "^8.4.6",
        "@react-navigation/bottom-tabs": "^5.10.6",
        "@react-navigation/material-bottom-tabs": "^5.3.6",
        "@react-navigation/material-top-tabs": "^5.3.6",
        "@react-navigation/native": "^5.8.6",
        "@react-navigation/stack": "^5.12.3",
        "age-calculator": "^1.0.0",
        "expo": "~39.0.2",
        "expo-ads-admob": "~8.3.0",
        "expo-constants": "~9.2.0",
        "expo-file-system": "~9.2.0",
        "expo-google-app-auth": "^8.1.3",
        "expo-google-sign-in": "~8.3.0",
        "expo-image-manipulator": "~8.3.0",
        "expo-image-picker": "~9.1.0",
        "expo-linking": "^1.0.4",
        "expo-localization": "~9.0.0",
        "expo-media-library": "~9.2.1",
        "expo-notifications": "~0.7.2",
        "expo-permissions": "~9.3.0",
        "expo-status-bar": "~1.0.2",
        "expo-video-thumbnails": "~4.3.0",
        "firebase": "7.9.0",
        "i18n-js": "^3.7.1",
        "moment": "^2.29.1",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
        "react-native-dropdown-picker": "^3.7.0",
        "react-native-fs": "^2.16.6",
        "react-native-gesture-handler": "~1.7.0",
        "react-native-modal-selector": "^2.0.3",
        "react-native-paper": "^4.3.1",
        "react-native-reanimated": "~1.13.0",
        "react-native-safe-area-context": "3.1.4",
        "react-native-screens": "~2.10.1",
        "react-native-tab-view": "^2.15.1",
        "react-native-web": "~0.13.12",
        "sentry-expo": "^3.0.2"
    },
    "devDependencies": {
        "@babel/core": "~7.9.0"
    },
    "private": true
}

App.js

const Stack = createStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            {/* <StatusBar barStyle="light-content"/> */}
            {Platform.OS === 'ios'
                ? <StatusBar barStyle="dark-content" />
                : <StatusBar barStyle="light-content" />}
            <Stack.Navigator initialRouteName="Loading"
                screenOptions={{ headerShown: false }}
            >
                <Stack.Screen name="Loading" component={LoadingScreen} />
                <Stack.Screen name="Login" component={LoginScreen} />
                <Stack.Screen name="Main" component={MainScreen}
                    options={{
                        headerShown: true,
                        headerTitleAlign: "center",
                        headerTitleStyle: {
                            color: "#5887f9"
                        }
                    }}
                />
                <Stack.Screen name="PushInfo" component={PushInfoScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

MainScreen.js

const Tab = createMaterialBottomTabNavigator();
export function MainScreen({ navigation, route }) {
    return (
        <>
            <Tab.Navigator
                initialRouteName="UserList"
                labeled={false}
                inactiveColor="#b0caff"
                activeColor="#5887f9"
                barStyle={{ backgroundColor: "white" }}
            >
                <Tab.Screen name="UserListComponent" component={UserListComponent}
                    initialParams={{
                        ...route
                    }}
                    options={{
                        tabBarIcon: ({ color }) => (
                            <FontAwesome5 name="smile" size={24} color={color} />
                        )
                    }} />
                <Tab.Screen name="Friends" component={FriendsComponent}
                    options={{
                        tabBarIcon: ({ color }) => (
                            <MaterialCommunityIcons name="account-group" size={24} color={color} />
                        )
                    }} />
                <Tab.Screen name="Chat" component={ChatComponent}
                    options={{
                        tabBarIcon: ({ color }) => (
                            <MaterialCommunityIcons name="chat-outline" size={24} color={color} />
                        )
                    }} />
                <Tab.Screen name="Profile" component={ProfileScreen}
                    options={{
                        tabBarIcon: ({ color }) => (
                            <MaterialCommunityIcons name="account" size={24} color={color} />
                        )
                    }} />
                <Tab.Screen name="Setting" component={SettingScreen}
                    initialParams={{
                        uid: uid
                    }}
                    options={{
                        tabBarIcon: ({ color }) => (
                            <MaterialCommunityIcons name="settings" size={24} color={color} />
                        )
                    }} />
            </Tab.Navigator>
            <View style={{ width: screenWidth, backgroundColor: "white" }}>
                {Platform.OS === 'ios'
                    ? <AdMobBanner
                        bannerSize="smartBannerLandscape"
                        adUnitID={adUnitID} // Test ID, Replace with your-admob-unit-id
                        servePersonalizedAds={true}// true or false
                    />
                    :
                    <AdMobBanner
                        bannerSize="smartBannerLandscape"
                        adUnitID={adUnitID} // Test ID, Replace with your-admob-unit-id
                        servePersonalizedAds={true}// true or false
                    />
                }
            </View>
        </>
    );
}

Answer 1

我遇到了类似的问题。经过 12 小时的调试，我的问题是其中一个屏幕组件有一个名为 state 的参数。此参数覆盖了导致问题的实际路由状态。

之前

navigation.navigate("RouteName", {
  state: newState,
  ...otherParams
})

// In Screen Component
route.params.state

之后

navigation.navigate("RouteName", {
  customState: newState,
  ...otherParams
})

// In Screen Component
route.params.customState

此更改似乎发生在 @react-navigation/core 的版本 5.12.5 之后。因此，作为 expo 升级的一部分升级软件包时，您可能会遇到错误。