@3rd1t/formal-native 中文文档教程

Question

@kevinwolf/formal-native

@kevinwolf/formal 的原生扩展。

Table of Contents

• Install
• Usage
• Tips
• Extended documentation

Install

yarn add @kevinwolf/formal-native

Usage

import React from "react";
import { Alert, View, Text, TextInput, Button } from "react-native";
import useFormal from "@kevinwolf/formal-native";
import * as yup from "yup";

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  email: yup
    .string()
    .email()
    .required()
});

const initialValues = {
  firstName: "Tony",
  lastName: "Stark",
  email: "ironman@avengers.io"
};

export default function App() {
  const formal = useFormal(initialValues, {
    schema,
    onSubmit: values => Alert.alert(JSON.stringify(values))
  });

  return (
    <View>
      <View>
        <Text>First Name</Text>
        <TextInput {...formal.getFieldProps("firstName")} />
        {formal.errors.firstName && <Text>{formal.errors.firstName}</Text>}
      </View>

      <View>
        <Text>Last Name</Text>
        <TextInput {...formal.getFieldProps("lastName")} />
        {formal.errors.lastName && <Text>{formal.errors.lastName}</Text>}
      </View>

      <View>
        <Text>Email</Text>
        <TextInput {...formal.getFieldProps("email")} autoCapitalize="none" />
        {formal.errors.email && <Text>{formal.errors.email}</Text>}
      </View>

      <Button {...formal.getSubmitButtonProps()} title="Submit" />
    </View>
  );
}

Tips

如您所见，由于字段代码的重复，上述代码变得有些冗长，为了抽象出重复的代码，您可以创建一个 Field 组件并将所有这些调用替换为 App. js。

Field.js

import React from "react";
import { View, Text, TextInput } from "react-native";

export default function Field({ label, error, ...props }) {
  return (
    <View>
      <Text>{label}</Text>
      <TextInput {...props} />
      {error && <Text>{error}</Text>}
    </View>
  );
}

App.js

import React from "react";
-import { Alert, View, Text, TextInput, Button } from "react-native";
+import { Alert, View } from 'react-native'
import useFormal from "@kevinwolf/formal-native";
import * as yup from "yup";

+import Field from './components/field'
+import Button from './components/button'

const schema = yup.object().shape({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  email: yup
    .string()
    .email()
    .required()
});

const initialValues = {
  firstName: "Tony",
  lastName: "Stark",
  email: "ironman@avengers.io"
};

export default function App() {
  const formal = useFormal(initialValues, {
    schema,
    onSubmit: values => Alert.alert(JSON.stringify(values))
  });

  return (
    <View>
-      <View>
-        <Text>First Name</Text>
-        <TextInput {...formal.getFieldProps("firstName")} />
-        {formal.errors.firstName && (<Text>{formal.errors.firstName}</Text>)}
-      </View>
+      <Field {...formal.getFieldProps('firstName')} label="First name" />

-      <View>
-        <Text>Last Name</Text>
-        <TextInput {...formal.getFieldProps("lastName")} />
-        {formal.errors.lastName && (<Text>{formal.errors.lastName}</Text>)}
-      </View>
+      <Field {...formal.getFieldProps('lastName')} label="Last name" />

-      <View>
-        <Text>Email</Text>
-        <TextInput {...formal.getFieldProps("email")} autoCapitalize="none" />
-        {formal.errors.email && (<Text>{formal.errors.email}</Text>)}
-      </View>
+      <Field {...formal.getFieldProps('email')} label="Email" autoCapitalize="none" />

      <Button {...formal.getSubmitButtonProps()} title="Submit" />
    </View>
  );
}

Extended documentation

有关扩展文档、示例和贡献指南，请参阅 包含这个包的 monorepo。