探索 `react-native-formik`：优雅地构建React Native表单

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Formik } from 'react-native-formik';
import { Input } from 'react-native-elements';
 
const RegisterScreen = () => (
  <Formik
    initialValues={{ email: '', password: '' }}
    onSubmit={values => console.log(values)}
  >
    {({ handleChange, handleSubmit, values }) => (
      <View style={styles.container}>
        <Input
          placeholder="Email"
          autoCapitalize="none"
          autoCorrect={false}
          onChangeText={handleChange('email')}
          value={values.email}
        />
        <Input
          placeholder="Password"
          secureTextEntry
          onChangeText={handleChange('password')}
          value={values.password}
        />
        <Button title="Register" onPress={handleSubmit} />
      </View>
    )}
  </Formik>
);
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
});
 
export default RegisterScreen;

这个例子展示了如何使用react-native-formik库来创建一个简单的注册表单。它使用Formik组件作为根组件，并通过handleChange和handleSubmit函数处理表单输入和提交事件。这个例子简洁明了，并且展示了如何将表单状态和逻辑与UI分离，这是构建现代React Native应用程序的推荐实践。