我开始在一个项目上工作，最近开始在React Native中编码。我目前遇到一个问题，当我试图单击“提交”按钮时，会显示错误，这应该会将我带到另一个屏幕。我尝试了很多方法，但都没有成功。

App.js：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Sliders from './screens/Sliders';
import SignUp from './screens/signUp';
import SignIn from './screens/signIn';
import ResetPassword from './screens/resetPassword';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Sliders">
        <Stack.Screen
          name="Sliders"
          component={Sliders}
          options={{ 
            headerShown: false, // Hide the header on the Sliders screen 
          }}
        />
        <Stack.Screen 
          name="SignUp" 
          component={SignUp}
          options={{
            headerBackVisible: false, // ide the back arrow on the SignUp screen
            headerTitle: 'Sign Up', // Set a custom header title for the SignUp screen
            headerStyle: {
              backgroundColor: '#129990', // Header background color
            },
            headerTintColor: '#ffffff', // Header arrow color 
            headerTitleStyle: {
              color: '#ffffff', // Text color in the header
            },
          }}
        />
        <Stack.Screen 
          name="SignIn" 
          component={SignIn}
          options={{
            headerBackVisible: true, // ide the back arrow on the SignUp screen
            headerTitle: 'Sign In', // Set a custom header title for the SignUp screen
            headerStyle: {
              backgroundColor: '#129990', // Header background color
            },
            headerTintColor: '#ffffff', // Header arrow color 
            headerTitleStyle: {
              color: '#ffffff', // Text color in the header
            },
          }}
        />
        <Stack.Screen 
          name="ResetPassword" 
          component={ResetPassword}
          options={{
            headerBackVisible: false, // ide the back arrow on the SignUp screen
            headerTitle: 'Reset Password', // Set a custom header title for the SignUp screen
            headerStyle: {
              backgroundColor: '#129990', // Header background color
            },
            headerTintColor: '#ffffff', // Header arrow color 
            headerTitleStyle: {
              color: '#ffffff', // Text color in the header
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

字符串

登录屏幕：（在这个屏幕上，当我点击提交按钮时，它显示了我上面提到的错误）

import React from 'react';
import { View, Text, TextInput, Dimensions, TouchableOpacity, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { Formik } from 'formik';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

const { width, height } = Dimensions.get('window');

const SignIn = ({ navigation }) => {
  const handleFacebookLogin = () => {
    // Implement your Facebook login logic here
  };

  const handleGoogleLogin = () => {
    // Implement your Google login logic here
  };

  /*const validationSchema = Yup.object().shape({
    email: Yup.string().required('Email is required!').email('Enter a valid email address'),
    password: Yup.string()
      .required('Password is required')
      .min(6, 'Password must be at least 6 characters long')
      .matches(/^(?=.*[0-9])(?=.*[!@#$%^&*])/, 'Password must contain symbols and numbers'),
  });*/

  const handleFormSubmit = (values) => {
    // Implement form submission logic here
    console.log(values);

    navigation.navigate('Home');
  };

  return (
      <View style={styles.container}>
        <View style={styles.socialContainer}>
          <Button
            title="Connect with Facebook"
            buttonStyle={styles.SocialButtonFacebook}
            icon={
              <MaterialCommunityIcons
                name='facebook'
                size={28}
                color="#ffffff"
                style={styles.SocialIcon} />
            }
            iconLeft
            onPress={handleFacebookLogin}
          />

          <Button
            title="Connect with Google"
            buttonStyle={styles.SocialButtonGoogle}
            icon={
              <MaterialCommunityIcons
                name="google"
                size={28}
                color="#ffffff"
                style={styles.SocialIcon} />
            }
            iconLeft
            onPress={handleGoogleLogin}
          />
        </View>

        <View style={styles.dividerContainer}>
          <View style={styles.DividerHr} />
            <Text style={styles.DividerText}>OR</Text>
          <View style={styles.DividerHr} />
        </View>
        
        <View style={styles.SignUpContainer}>
          <Formik
            initialValues={{
              email: '',
              password: '',
            }}
            /*validationSchema={validationSchema}*/
            onSubmit={(values) => handleFormSubmit(values)}
          >
            {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
              <>
                <TextInput
                  onChangeText={handleChange('email')}
                  onBlur={handleBlur('email')}
                  placeholder='Email address'
                  value={values.email}
                  style={styles.FieldInput}
                />
                {touched.email && errors.email && <Text style={styles.SignUpValidation}>{errors.email}</Text>}

                <TextInput
                  onChangeText={handleChange('password')}
                  onBlur={handleBlur('password')}
                  value={values.password}
                  placeholder='Password'
                  secureTextEntry={true}
                  style={styles.FieldInput}
                />
                {touched.password && errors.password && <Text style={styles.SignUpValidation}>{errors.password}</Text>}
                
                <TouchableOpacity style={styles.SignUpButton} onPress={(handleSubmit)}>
                  <Text style={styles.SignUpButtonText}>Continue</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.RessetPasswordButton} onPress={() => navigation.navigate('ResetPassword')}>
                  <Text style={styles.RessetPasswordText}>Resset Password</Text>
                </TouchableOpacity>
              </>
            )}
          </Formik>
        </View>

        <View style={styles.LoginContainer}>
          <Text onPress={() => navigation.navigate('SignUp')} style={styles.LoginText}>
            Don't have an account? Sign Up
          </Text>
        </View>
        
      </View>
  );
};

export default SignIn;

型
我已经尝试了各种方法来解决这个问题，我甚至不知道我已经尝试了什么，有人能给我解释一下，并给予我一个解决上述问题的办法。