React Native Formik 使用教程

React Native Formik 使用教程

react-native-formikSet of helpers to make form awesome with React Native and Formik项目地址:https://gitcode.com/gh_mirrors/re/react-native-formik

项目介绍

React Native Formik 是一个用于简化 React Native 应用中表单处理的库。它与 Formik 库完全兼容，并提供了一些额外的功能来帮助开发者更高效地处理表单状态、输入验证、格式化、错误处理等。

项目快速启动

安装

首先，你需要安装 react-native-formik 库：

npm install react-native-formik

基本使用

以下是一个简单的示例，展示如何在 React Native 项目中使用 Formik：

import React from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
});

const App = () => (
  <View>
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => console.log(values)}
    >
      {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
        <View>
          <TextInput
            onChangeText={handleChange('email')}
            onBlur={handleBlur('email')}
            value={values.email}
            placeholder="Email"
          />
          {errors.email && touched.email && <Text>{errors.email}</Text>}
          <TextInput
            onChangeText={handleChange('password')}
            onBlur={handleBlur('password')}
            value={values.password}
            placeholder="Password"
            secureTextEntry
          />
          {errors.password && touched.password && <Text>{errors.password}</Text>}
          <Button onPress={handleSubmit} title="Submit" />
        </View>
      )}
    </Formik>
  </View>
);

export default App;

应用案例和最佳实践

应用案例

React Native Formik 可以用于各种表单场景，例如用户注册、登录、数据提交等。以下是一个用户注册表单的示例：

import React from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], 'Passwords must match')
    .required('Required'),
});

const SignupForm = () => (
  <View>
    <Formik
      initialValues={{ email: '', password: '', confirmPassword: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => console.log(values)}
    >
      {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
        <View>
          <TextInput
            onChangeText={handleChange('email')}
            onBlur={handleBlur('email')}
            value={values.email}
            placeholder="Email"
          />
          {errors.email && touched.email && <Text>{errors.email}</Text>}
          <TextInput
            onChangeText={handleChange('password')}
            onBlur={handleBlur('password')}
            value={values.password}
            placeholder="Password"
            secureTextEntry
          />
          {errors.password && touched.password && <Text>{errors.password}</Text>}
          <TextInput
            onChangeText={handleChange('confirmPassword')}
            onBlur={handleBlur('confirmPassword')}
            value={values.confirmPassword}
            placeholder="Confirm Password"
            secureTextEntry
          />
          {errors.confirmPassword && touched.confirmPassword && <Text>{errors.confirmPassword}</Text>}
          <Button onPress={handleSubmit} title="Sign Up" />
        </View>
      )}
    </Formik>
  </View>
);

export default Signup

react-native-formikSet of helpers to make form awesome with React Native and Formik项目地址:https://gitcode.com/gh_mirrors/re/react-native-formik