世博堆栈屏幕无法正常工作,首次加载时未根据首先加载的(选项卡)屏幕加载顺序获取加载登录页面。当我尝试首先通过更改屏幕顺序加载我的登录屏幕时,我无法更改它。我清除了捕获物,我做了一切可能的事情,请帮助我。这是我的_layout.tsx
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { SplashScreen, Stack } from 'expo-router';
import { useEffect } from 'react';
import { useColorScheme } from 'react-native';
import { RootSiblingParent } from 'react-native-root-siblings';
import SignInPage from './screens/Login';
export {
// Catch any errors thrown by the Layout component.
ErrorBoundary,
} from 'expo-router';
// export const unstable_settings = {
// // Ensure that reloading on `/modal` keeps a back button present.
// initialRouteName: '(tabs)',
// };
export default function RootLayout() {
const [loaded, error] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
...FontAwesome.font,
});
// Expo Router uses Error Boundaries to catch errors in the navigation tree.
useEffect(() => {
if (error) throw error;
}, [error]);
return (
<>
{/* Keep the splash screen open until the assets have loaded. In the future, we should just support async font loading with a native version of font-display. */}
{!loaded && <SplashScreen />}
{loaded && <RootSiblingParent>
<RootLayoutNav />
</RootSiblingParent>}
</>
);
}
function RootLayoutNav() {
const colorScheme = useColorScheme();
return (
<>
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="Login" options={{ title: 'Log in' }} />
<Stack.Screen name="screens/Mylistings" options={{ title: 'Log in' }} />
<Stack.Screen name="screens/Signup" options={{ title: 'Sign Up' }} />
<Stack.Screen name="modal" options={{ presentation: 'modal' }} />
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
</Stack>
</ThemeProvider>
</>
);
}
登录.tsx
import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import PasswordInput from '../../components/user/PasswordInput';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
import { Link, useRouter,Stack } from 'expo-router';
import Toast from 'react-native-root-toast';
import { FirebaseError } from 'firebase/app';
const SignInPage = () => {
const router = useRouter();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleSignIn = async () => {
try {
const auth = getAuth();
await signInWithEmailAndPassword(auth, email, password);
// Handle successful sign-in
console.log('User signed in successfully');
// router.push('../../one');
// Perform any other necessary actions after successful sign-in
} catch (error) {
// Function to format Firebase error codes to user-friendly messages
const formatErrorMessage = (error :any) => {
switch (error.code) {
case 'auth/invalid-email':
return 'Invalid email address. Please enter a valid email.';
case 'auth/user-disabled':
return 'Your account has been disabled. Please contact support.';
case 'auth/user-not-found':
case 'auth/wrong-password':
return 'Invalid email or password. Please check your credentials.';
// Add more error codes and corresponding messages as needed
default:
return 'An error occurred. Please try again later.';
}
};
// Handle sign-in error
const firebaseError = error as FirebaseError;
const errorMessage = formatErrorMessage(firebaseError);
let toast = Toast.show(`Sign-in error: ${errorMessage}`, {
duration: Toast.durations.LONG,
});
// If you want to use console.error for debugging
// console.error('Sign-in error:', error);
// Add any necessary error handling logic or display error message to the user
}
};
return (
<>
<Stack.Screen options={{ title: 'Oops!' }} />
<View style={styles.container}>
<View style={styles.box}>
<TextInput
style={styles.input}
placeholder="Email"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
/>
<PasswordInput
placeholder="Password"
value={password}
onChangeText={setPassword}
/>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity style={styles.buttonContainer} onPress={handleSignIn}>
<Text style={styles.buttonText}>Sign In</Text>
</TouchableOpacity>
<Text>
New User? <Link href={'./Signup'}>Sign Up</Link>
</Text>
</View>
<Link href='./forgotPassword'>Forgot Password</Link>
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
padding: 16,
},
box: {
width: '90%',
borderRadius: 4,
backgroundColor: 'white',
},
input: {
width: '100%',
marginBottom: 12,
padding: 8,
borderWidth: 1,
borderRadius: 4,
},
buttonContainer: {
backgroundColor: '#4287f5',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 20,
paddingVertical: 10,
paddingHorizontal: 20,
},
buttonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
});
export default SignInPage;
世博会首先按字母顺序对您的路线名称进行排序,然后将第一个项目(屏幕)显示为您的初始路线。 解决方法是从您的
_layout.tsx
导出以下内容
export const unstable_settings = {
initialRouteName: 'your-route-name',
};