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