React Native Navigation说“导航” {'name＆quot：; quot'car; quot;}没有任何导航器处理吗？

Question

我正在尝试开发一个应用程序，其中有两种导航方案是在渴望导航之前，而另一种是在登录导航之后。 so and avarigation {“ name”：“ car”}屏幕应仅显示一个用户登录后，但是当我尝试执行此操作时，它说`“导航” {“ name”：“ car”}不会被任何导航处理。请指导我如何解决，这是我的代码示例。在 mainstackscreen 上也有链接到底部导航。

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import BottomNavigation from './BottomNavigation';
import Car from '../src/Screen/Car/Car';
import Login from '../src/Screen/Auth/Login/Login';
import ForgetPassword from '../src/Screen/Auth/Forget/ForgetPassword';
import OfflineNotice from '../src/Screen/Offline/Offline';
import Screen from '../src/Screen/Offline/Screen';
import AsyncStorage from '@react-native-async-storage/async-storage';

function Navigation1({navigation}) {
  const [age, setAge] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  const readData = async () => {
    try {
      const userAge = await AsyncStorage.getItem('@storage_Key');
      setLoading(false);
      setAge(userAge);
    } catch (e) {
      console.log('Error While Fetching Storage data ');
    }
  };
  React.useEffect(() => {
    const interval = setInterval(() => {
      readData();
    }, 100);

    return () => {
      clearTimeout(interval);
    };
  }, [navigation]);

  const getLageoginPage = async () => {
    if (await AsyncStorage.getItem('@storage_Key')) {
    } else {
      navigation.navigate('Login');
    }
  };

  React.useEffect(() => {
    getLageoginPage();
  }, [navigation]);

  const AuthStack = createStackNavigator();
  const AuthStackScreen = () => (
    <AuthStack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: 'white',
          height: 47,
        },
      }}>
      <Stack.Screen
        name="Login"
        component={Login}
        options={{title: 'Dashboard', headerShown: false}}
      />
      <Stack.Screen
        name="Forget"
        component={ForgetPassword}
        options={{title: 'Dashboard', headerShown: false}}
      />
    </AuthStack.Navigator>
  );

  const MainStack = createStackNavigator();
  const MainStackScreen = () => (
    <MainStack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: 'white',
          height: 45,
        },
      }}>
      <MainStack.Screen
        name="Home"
        component={BottomNavigation}
        options={{title: 'Main', headerShown: false}}
      />
      <MainStack.Screen
        name="Car"
        component={Car}
        options={{title: 'Car', headerShown: false}}
      />
    </MainStack.Navigator>
  );

  const Stack = createStackNavigator();

  let network = OfflineNotice();
  if (network === false) {
    return <Screen />;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {age !== null && !loading ? (
          <Stack.Screen
            name="Main"
            component={MainStackScreen}
            options={{title: 'Dashboard', headerShown: false}}
          />
        ) : (
          <Stack.Screen
            name="Auth"
            component={AuthStackScreen}
            options={{title: 'Dashboard', headerShown: false}}
          />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default Navigation1;

这是底部导航代码。

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {Dimensions} from 'react-native';
import Start from '../src/Screen/Start/Start';
import Driver from '../src/Screen/Driver/Driver';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
const Tab = createBottomTabNavigator();
const DEVICE_WIDTH = Dimensions.get('window').width;
const BottomNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName={'Car'}
      lazy={true}
      tabBarOptions={{
        showLabel: false,
        inactiveTintColor: '#00A870',
        backgroundColor: 'white',
        activeTintColor: '#00A870',
        labelStyle: {
          fontSize: 12,
        },
        style: {
          backgroundColor: 'white',
          position: 'absolute',
          marginLeft: 120, // Use margins as you required
          marginRight: 100,
          marginBottom: 20,
          width: DEVICE_WIDTH - 230, // Or using a percentage as required
          borderRadius: 25,
        },
      }}>
      <Tab.Screen
        name="Start"
        component={Start}
        options={{
          tabBarLabel: 'Start',
          tabBarIcon: ({focused}) => (
            <MaterialCommunityIcons
              name={focused ? 'steering' : 'steering-off'}
              color={focused ? '#52CA00' : '#231F20'}
              size={25}
            />
          ),
        }}
        listeners={({navigation, route}) => ({
          tabPress: e => {
            e.preventDefault();
            navigation.navigate('Start');
          },
        })}
      />

      <Tab.Screen
        name="Driver"
        component={Driver}
        listeners={({navigation, route}) => ({
          tabPress: e => {
            e.preventDefault();
            navigation.navigate('Driver');
          },
        })}
        options={{
          tabBarLabel: 'Driver',

          tabBarIcon: ({focused}) => (
            <Ionicons
              name={focused ? 'map-outline' : 'map'}
              color={focused ? '#52CA00' : '#231F20'}
              size={25}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default BottomNavigation;

在成功登录时使用的位置。

.then(async response2 => {
              setLoading(false);
              // Check if user has email or not
              if (response2.data.email) {
                try {
                  await AsyncStorage.setItem('@storage_Key', data.token);
                  await AsyncStorage.setItem(
                    '@storage_Key_refresh',
                    data.refresh_token,
                  );
                } catch (error) {
                  console.log('AsyncStorage Error: ' + error.message);
                }

                try {
                  navigation.navigate('Car');
                } catch (error) {
                  console.log('Navigation Error: ' + error.message);
                }
              } else {
                setLoading(false);
                Alert.alert(
                  'Login in successfull',
                  'Sorry, you do not have access rights to Digital fleet',
                );
              }
            })