Expo 路由器堆栈屏幕无法根据订单工作

问题描述 投票:0回答:1

世博堆栈屏幕无法正常工作,首次加载时未根据首先加载的(选项卡)屏幕加载顺序获取加载登录页面。当我尝试首先通过更改屏幕顺序加载我的登录屏幕时,我无法更改它。我清除了捕获物,我做了一切可能的事情,请帮助我。这是我的_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;
android typescript react-native expo expo-router
1个回答
0
投票

世博会首先按字母顺序对您的路线名称进行排序,然后将第一个项目(屏幕)显示为您的初始路线。 解决方法是从您的

_layout.tsx

导出以下内容
export const unstable_settings = {
  initialRouteName: 'your-route-name',
};

https://docs.expo.dev/router/advanced/router-settings/

© www.soinside.com 2019 - 2024. All rights reserved.