在驗證電子郵件和密碼后,我試圖從登錄螢屏導航到個人資料螢屏。其他一切都有效。我能夠從 auth api 獲取令牌,存盤它并檢索它。之后我無法導航到下一個螢屏,這會引發錯誤
這是我的代碼:
更新:根據答案。我更正了拼寫錯誤。現在它起作用了!!
import * as React from 'react';
import { useState } from 'react';
import { ActivityIndicator, StatusBar, StyleSheet, TextInput, TouchableOpacity, Image, TouchableHighlight } from 'react-native';
import { Text, View } from '../components/Themed';
import * as SecureStore from 'expo-secure-store';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import navigation from '../navigation';
export default function LoginScreen({navigation}) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [data, setData] = useState([]);
const doUserLogIn = async() => {
try {
const response = await fetch('http://some-server.de/api/login/?email=' email '&password=' password, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
});
const json = await response.json();
setData(json);
} catch (e) {
console.log('Error1:' e);
} finally {
try{
await SecureStore.setItemAsync('token', JSON.stringify(data.token));
navigation.navigate('Profile');
} catch(e) {alert('Error2:' e); }
}
}
return (
<View style={styles.container}>
<StatusBar style="auto" />
<View style={styles.inputView}>
<TextInput
placeholder="Email."
onChangeText={(email) => setEmail(email)}
/>
</View>
<View style={styles.inputView}>
<TextInput
placeholder="Passwort."
onChangeText={(password) => setPassword(password)}
/>
</View>
<TouchableOpacity style={styles.loginBtn} onPress={() => doUserLogIn()}>
<Text style={styles.loginText}>Anmelden</Text>
</TouchableOpacity>
</View>
);
}
下面是我的抽屜導航的代碼:
const Drawer = createDrawerNavigator();
function RootNavigator() {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Anmelden" component={LoginScreen} />
<Drawer.Screen name="Profil" component={ProfileScreen} />
<Drawer.Screen name="Schichten" component={ShiftsScreen} />
<Drawer.Screen name="Arbeitszeitbericht" component={TimelogScreen} />
</Drawer.Navigator>
);
}`
uj5u.com熱心網友回復:
該錯誤意味著“組態檔”與當前頁面不在同一螢屏堆疊中。如果您的堆疊由“登錄”分隔,那么您的登錄堆疊將無法訪問您的“登錄”堆疊。您可以改為設定條件:
userLoggedIn ? LoggedInStack : LoginStack
因此,當用戶登錄時,它會自動切換到 LoggedInStack,它將“組態檔”作為其第一個螢屏,因此它直接進入那里。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/315551.html
標籤:javascript 反应 反应原生 前端
