错误:任何导航器均未处理有效负载为{“ name”:“ Home”}的操作'NAVIGATE'

时间:2020-09-18 19:08:00

标签: react-native react-navigation-stack react-navigation-v5 react-navigation-bottom-tab

登录时,我成功登录,但是专用路由无法重定向到主屏幕 当我重新启动该应用程序并定向到主屏幕时,则当我尝试注销时。我也无法定向到登录屏幕..我的逻辑是..的问题 我将导航分为私人和公共两个?/

这是私人路线

import * as React from 'react';
import {Text} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import HomeScreen from '../../screens/Home';
import MatchesScreen from '../../screens/Matches';
import MessagesScreen from '../../screens/Messages';
import ProfileScreen from '../../screens/Profile';
import SettingScreen from '../../screens/Settings';
import Icon from '../../components/Icon';
import styles from '../../assets/styles';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const ExploreStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Explore" component={HomeScreen} />
    </Stack.Navigator>
  );
};

const MatchesStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Matches" component={MatchesScreen} />
    </Stack.Navigator>
  );
};

const ChatStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Matches" component={MessagesScreen} />
    </Stack.Navigator>
  );
};

const SettingStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Settings" component={SettingScreen} />
    </Stack.Navigator>
  );
};

const HomeNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused}) => {
          const iconFocused = focused ? '#7444C0' : '#363636';
          let iconName;

          if (route.name === 'Explore') {
            iconName = 'explore';
          } else if (route.name === 'Matches') {
            iconName = 'heart';
          } else if (route.name === 'Chat') {
            iconName = 'chat';
          } else if (route.name === 'Setting') {
            iconName = 'chevronLeft';
          }
          // You can return any component that you like here!
          return (
            <Text style={[styles.iconMenu, {color: iconFocused}]}>
              <Icon name={iconName} />
            </Text>
          );
        },
      })}
      tabBarOptions={{
        activeTintColor: '#7444C0',
        inactiveTintColor: '#363636',
        labelStyle: {
          fontSize: 14,
          textTransform: 'uppercase',
          paddingTop: 10,
        },
        style: {
          borderTopWidth: 0,
          paddingVertical: 20,
        },
      }}>
      <Tab.Screen name="Explore" component={ExploreStackNavigator} />
      <Tab.Screen name="Matches" component={MatchesStackNavigator} />
      <Tab.Screen name="Chat" component={ChatStackNavigator} />
      <Tab.Screen name="Setting" component={SettingStackNavigator} />
    </Tab.Navigator>
  );
};

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeNavigator} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigator;

这是公共路线-它处理对a的所有身份验证

import * as React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import LoginScreen from '../../screens/Login';
import RegisterScreen from '../../screens/Register';
import ForgotPasswordScreen from '../../screens/ForgotPassword';
import WelcomeScreen from '../../screens/Welcome';
import QuestionaireScreen from '../../screens/Questionaire';

const Stack = createStackNavigator();

const AuthNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          headerLeft: () => null,
        }}>
        <Stack.Screen name="Welcome" component={WelcomeScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="Questionaire" component={QuestionaireScreen} />
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AuthNavigator;

在这里尝试在两条路线之间进行切换

import React, {useState, useEffect} from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import {SafeAreaProvider} from 'react-native-safe-area-context';

// import public navigation
import AuthenticationNavigator from './public';
import RootNavigator from './private';

const AppNavigator = () => {
  const [value, setValue] = useState('value');

  const readTokenFromStorage = async () => {
    const token = await AsyncStorage.getItem('token');
    console.log('Token :', token);
    setValue(token);
  };

  useEffect(() => {
    readTokenFromStorage();
  }, []);

  return (
    <SafeAreaProvider>
      {!value ? <AuthenticationNavigator /> : <RootNavigator />}
    </SafeAreaProvider>
  );
};

export default AppNavigator;

0 个答案:

没有答案