Einleitung React Native hat kein natives <form>-Element, und die Verwaltung des Zustands mehrerer Eingaben kann mühsam sein. Deshalb zeige ich Ihnen einen einfachen Weg, Formulare mit Formik und Yup zu handhaben.
Voraussetzungen Expo CLI installiert Grundkenntnisse in React Native Wrap deine App mit React Native Papers <PaperProvider> Setup npx create-expo-app my-formik-form cd my-formik-form npm install formik react-native-paper yup Wie Formik mit React Native funktioniert 1. Abhängigkeiten importieren app/components/MyForm.tsx
import { Formik } from "formik" import { View } from "react-native" import { TextInput, Text, Button, HelperText } from "react-native-paper" import * as Yup from "yup" 2. Das Formular mit Formik umschließen export default function MyForm() { return ( <Formik initialValues={{ email: "", password: "" }} onSubmit={values => console.log(values)} > {({ handleChange, handleBlur, handleSubmit, values }) => ( <View> <TextInput label="E-Mail" value={values.email} onChangeText={handleChange("email")} onBlur={handleBlur("email")} /> <Button onPress={handleSubmit}>Anmelden</Button> </View> )} </Formik> ) } Validierung mit Yup const SignupSchema = Yup.object().shape({ email: Yup.string().email("Ungültige E-Mail").required("Erforderlich"), password: Yup.string().min(6, "Zu kurz").required("Erforderlich") }) Fazit Formik vereinfacht die Zustandsverwaltung von Formularen und Yup bietet ein leistungsstarkes Validierungssystem. Jetzt sind Sie bereit, komplexe Formulare mit Leichtigkeit zu erstellen!
