将formik与react-native结合使用

时间:2020-03-28 19:55:43

标签: react-native formik

我无法理解如何将formikreact-native一起使用。 formik文档中指定的唯一示例是Formik组件,该组件返回formik的上下文。但是,我想像本教程中建议的那样将其与<Form><Field><ErrorMessage>组件一起使用。当我从教程中复制代码时:

const SignupForm = () => {
  return (
    <Formik
      initialValues={{ firstName: '', lastName: '', email: '' }}
      validationSchema={Yup.object({
        firstName: Yup.string()
          .max(15, 'Must be 15 characters or less')
          .required('Required'),
        lastName: Yup.string()
          .max(20, 'Must be 20 characters or less')
          .required('Required'),
        email: Yup.string()
          .email('Invalid email address')
          .required('Required'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      <Form>
        <Text htmlFor="firstName">First Name</Text>
        <Field name="firstName" type="text" />
        <ErrorMessage name="firstName" />
        <Text htmlFor="lastName">Last Name</Text>
        <Field name="lastName" type="text" />
        <ErrorMessage name="lastName" />
        <Text htmlFor="email">Email Address</Text>
        <Field name="email" type="email" />
        <ErrorMessage name="email" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

我得到: enter image description here

调用栈来自<Field>组件,这些组件创建了<input>组件,不适用于响应本机。

有人可以向我解释如何像减少样板提供的那样使用它吗?

0 个答案:

没有答案