使用 React 导航 V5 进行身份验证，当单击按钮无法定向时出错

Question

我需要一个帮助，我在react native中创建了react导航v5的auth, auth正在工作，但是当我在登录表单中用navigation.navigate('Beranda')登录时，我得到了错误，如何修复这样的错误，这是我的代码登录代码函数

const [body, setBody] = useState({
username: '',
password: '',
});
const _handleSubmit = () => {
if (body.username === 'admin' && body.password === 'admin123') {
AsyncStorage.setItem('username', 'admin');
navigation.navigate('Beranda');
} else {
Alert.alert('Login Gagal');
}
};

这里是导航的代码

const HomeStackScreen = () => {
return (
<HomeStack.Navigator initialRouteName="Daily Transaction">
<HomeStack.Screen name="DailyTransaction" component={DailyTransaction} />
<HomeStack.Screen
name="DetailTransaction"
component={DetailTransaction}
/>
</HomeStack.Navigator>
);
};
const CashierStack = createStackNavigator();
const CashierStackScreen = () => {
return (
<CashierStack.Navigator initialRouteName="Menu">
<CashierStack.Screen name="Menu" component={Menu} />
<CashierStack.Screen name="DetailMenu" component={DetailMenu} />
<CashierStack.Screen name="Cart" component={Cart} />
</CashierStack.Navigator>
);
};
const AuthStack = createStackNavigator();
const AuthScreenStack = () => {
return (
<AuthStack.Navigator headerMode="none">
<AuthStack.Screen name="Login" component={Login} />
</AuthStack.Navigator>
);
};
const MenuBottom = createBottomTabNavigator();
const MenuBottomNav = () => {
return (
<MenuBottom.Navigator
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
if (route.name === 'Transaksi') {
if (focused) {
return (
<Image
source={require('../../../assets/icons/wallet-gold.png')}
// eslint-disable-next-line react-native/no-inline-styles
style={{width: 25, height: 25}}
/>
);
} else {
return (
<Image
source={require('../../../assets/icons/wallet-white.png')}
// eslint-disable-next-line react-native/no-inline-styles
style={{width: 25, height: 25}}
/>
);
}
} else if (route.name === 'Cashier') {
if (focused) {
return (
<Image
source={require('../../../assets/icons/cash-gold.png')}
// eslint-disable-next-line react-native/no-inline-styles
style={{width: 25, height: 25}}
/>
);
} else {
return (
<Image
source={require('../../../assets/icons/cash-white.png')}
// eslint-disable-next-line react-native/no-inline-styles
style={{width: 25, height: 25}}
/>
);
}
}
},
})}
tabBarOptions={{
activeTintColor: '#ffd700',
inactiveTintColor: '#fff',
style: {
backgroundColor: '#000',
},
}}>
<MenuBottom.Screen name="Transaksi" component={HomeStackScreen} />
<MenuBottom.Screen name="Cashier" component={CashierStackScreen} />
</MenuBottom.Navigator>
);
};
const BerandaStack = createStackNavigator();
const BerandaScreen = () => {
return (
<BerandaStack.Navigator headerMode="none">
<BerandaStack.Screen name="Beranda" component={MenuBottomNav} />
</BerandaStack.Navigator>
);
};
// const Stack = createStackNavigator();
const Main = () => {
const [Loading, setLoading] = React.useState(true);
const [token, setToken] = React.useState(null);
React.useEffect(() => {
const retrieveData = async () => {
try {
const valueString = await AsyncStorage.getItem('username');
// Other set states
setToken(valueString);
} catch (error) {
console.log(error);
}
};
retrieveData();
}, []);
React.useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 4000);
}, []);
if (Loading) {
return <Splash />;
}
return (
<NavigationContainer>
{token ? <BerandaScreen /> : <AuthScreenStack />}
</NavigationContainer>
);
};
export default Main;

错误在这里点击这里

谢谢你以前的帮助。

Answer 1

你得到这个的原因是因为屏幕不是导航的一部分。解决这个问题最简单的方法是无条件地呈现所有路由

return (
<NavigationContainer>
<AuthScreenStack/>
<BerandaScreen/> 
</NavigationContainer>
);

这将总是首先渲染AuthScreenStack。如果你想保持用户登录(检查localStorage的令牌)，你需要添加逻辑到你的AuthScreenStack重定向到BarandaScreen堆栈，如果令牌已经存在。

如果令牌存在，则自动从AuthScreenStack重定向到BarandaScreen，您可以在AuthScreenStack中添加以下内容:

React.useEffect(() => {
const retrieveData = async () => {
try {
const valueString = await AsyncStorage.getItem('username');
// Other set states
// maybe you want to validate it first
if (valueString) navigation.navigate('Beranda');
} catch (error) {
console.log(error);
}
};
retrieveData();
}, []);

此代码仅在组件挂载时运行一次。从本地存储获取令牌，然后导航到Beranda屏幕。