我似乎无法在我的 App.js 文件上进行三元身份验证。我正在检查是否有密钥,然后根据该密钥的存在显示 AuthStack 或 MainStack。当我从 AuthStack 转到 MainStack(将密钥设置为 AsyncStorage)时,我收到错误 - 任何导航器均未处理带有有效负载 {'name':'Home'} 的操作 'NAVIGATE'。当我注销或删除密钥时也会发生同样的情况。
根据文档,用户在经过身份验证后似乎会立即导航到应用程序,但这似乎不起作用。
应用程序.js 文件
import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import AuthStack from './src/navigation/AuthStack'
import MainStack from './src/navigation/MainStack'
export default function App({ navigation }) {
const [userKey, setUserKey] = useState(null)
useEffect(() => {
const bootstrapAsync = async () => {
try {
let userKey = await AsyncStorage.getItem('userKey')
setUserKey(userKey)
} catch (e) {
// Restoring token failed
}
}
bootstrapAsync()
}, [])
return (
<NavigationContainer >
{userKey == null ? (
<AuthStack />
) : (
<MainStack />
)}
</NavigationContainer>
);
}
认证栈
function AuthStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
</Stack.Navigator>
)
}
export default AuthStack
主栈
function MainStack({ navigation, route }) {
return (
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
</Stack.Navigator>
)
}
export default MainStack
这是使用 React-navigation v5 的最小身份验证设置。
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Constants from 'expo-constants';
const Stack = createStackNavigator();
const Auth = React.createContext(null);
export function Login() {
const [email, setEmail] = React.useState('');
const [pass, setPass] = React.useState('');
const { setToken } = React.useContext(Auth)
return (
<View style={styles.container}>
<TextInput
label="Email"
value={email}
style={styles.input}
onChangeText={(t) => setEmail(t)}
/>
<TextInput
label="Password"
value={pass}
style={styles.input}
onChangeText={(t) => setPass(t)}
/>
<Button mode="contained" onPress={() => setToken('Get the token and save!')}>Submit</Button>
</View>
);
}
export function Home() {
const { setToken } = React.useContext(Auth)
return (
<View>
<Text>Home</Text>
<Button mode="contained" onPress={() => setToken(null)}>Signout</Button>
</View>
);
}
export default function App() {
const [token, setToken] = React.useState(null);
return (
<Auth.Provider value={{token, setToken}}>
<NavigationContainer>
<Stack.Navigator>
{!token ? (
<Stack.Screen name="Login" component={Login} />
) : (
<Stack.Screen name="Home" component={Home} />
)}
</Stack.Navigator>
</NavigationContainer>
</Auth.Provider>
);
}
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight + 20,
padding: 20,
},
input: {
marginBottom: 20,
},
});
这是一个工作示例。
https://snack.expo.io/@raajnadar/react-navigation-auth-example https://snack.expo.io/@raajnadar/react-navigation-auth-example
注意 - 这是一个非常基本的设置,您必须对身份验证设置进行验证和正确的令牌检查,您不能依赖只有 2 个选项 true 或 false 的三元操作,您可能还具有像身份验证检查这样的中间状态。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)