React native 在react native中验证错误消息未更改

我正在学习如何使用yup验证这是我的代码。 但验证错误消息不会更改

import React from "react";
import { StyleSheet, Image } from "react-native";
import * as Yup from "yup";

import { Formik } from "formik";

import AppTextInput from "../components/AppTextInput";
import Screen from "../components/Screen";
import AppButton from "../components/AppButton";
import ErrorMessage from "../components/ErrorMessage";

const validationSchema = Yup.object().shape({
  email: Yup.string().required().email("Please enter a valid email").label("Email"),
  password: Yup.string().required().min(4, "To short").label("Password"),
});

function LoginScreen() {
  return (
    <Screen style={styles.container}>
      <Image style={styles.logo} source={require("../assets/logo-red.png")} />
      <Formik
        initialValues={{ email: "", password: "" }}
        onSubmit={(values) => console.log(values)}
        validationSchema={validationSchema}
      >
        {({ handleChange, handleSubmit, errors, setFieldTouched, touched }) => (
          <>
            <AppTextInput
              autoCapitalize="none"
              autoCorrect={false}
              icon="email"
              keyboardType="email-address"
              onBlur={() => setFieldTouched("email")}
              name="email"
              placeholder="Email"
              textContentType="emailAddress"
            />
            <ErrorMessage visible={touched.email} error={errors.email} />
            <AppTextInput
              autoCapitalize="none"
              autoCorrect={false}
              icon="lock"
              name="password"
              placeholder="Password"
              onBlur={() => setFieldTouched("password")}
              secureTextEntry
              textContentType="password"
            />
            <ErrorMessage visible={touched.password} error={errors.password} />
            <AppButton onPress={handleSubmit} title="Login" />
          </>
        )}
      </Formik>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  logo: {
    width: 80,
    height: 80,
    alignSelf: "center",
    marginTop: 50,
    marginBottom: 20,
  },
});

export default LoginScreen;

从“React”导入React；
从“react native”导入{StyleSheet，Image}；
从“Yup”导入*作为Yup；
从“Formik”导入{Formik}；
从“./components/AppTextInput”导入AppTextInput；
从“./组件/屏幕”导入屏幕；
从“./组件/AppButton”导入AppButton；
从“./组件/ErrorMessage”导入ErrorMessage；
const validationSchema=Yup.object（）.shape({
电子邮件：Yup.string（）.required（）.email（“请输入有效电子邮件”）.label（“电子邮件”），
密码：Yup.string（）.required（）.min（4，“To short”）.label（“密码”），
});
函数LoginScreen（）{
返回(
console.log（值）}
validationSchema={validationSchema}
>
{（{handleChange，handleSubmit，errors，setFieldTouched，touched}）=>(
setFieldTouched（“电子邮件”）}
name=“电子邮件”
占位符=“电子邮件”
textContentType=“电子邮件地址”
/>
setFieldTouched（“密码”）}
secureTextEntry
textContentType=“密码”
/>
)}
);
}
const styles=StyleSheet.create({
容器：{
填充：10，
},
标志：{
宽度：80，
身高：80，
对准自己：“居中”，
玛金托普：50，
marginBottom:20，
},
});
导出默认登录屏幕；

您没有编写

onChangeText

属性

像这样编写两个

AppTextInput

<AppTextInput
   autoCapitalize="none"
   autoCorrect={false}
   onChangeText={handleChange('email')} // This was missing
   icon="email"
   keyboardType="email-address"
   onBlur={() => setFieldTouched('email')}
   name="email"
   placeholder="Email"
   textContentType="emailAddress"
/>

<AppTextInput
   autoCapitalize="none"
   autoCorrect={false}
   onChangeText={handleChange('password')} // This was missing
   icon="lock"
   name="password"
   placeholder="Password"
   onBlur={() => setFieldTouched('password')}
   secureTextEntry
   textContentType="password"
 />

---

非常感谢我整天都被困在这里thankyou@WebBuilders很乐意帮忙。如果此答案解决了您的问题，请单击绿色复选标记将其标记为“已接受”。