带Formik的React-native-datepicker

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

const validationSchema = Yup.object().shape({
  date: Yup.date().required('Date is required'),
});

const MyForm = () => (
  <Formik
    initialValues={{ date: '' }}
    validationSchema={validationSchema}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
      <View>
        <Text>Date:</Text>
        <DatePicker
          style={{ width: 200 }}
          date={values.date}
          mode="date"
          placeholder="select date"
          format="YYYY-MM-DD"
          minDate="2020-05-01"
          maxDate="2020-06-01"
          confirmBtnText="Confirm"
          cancelBtnText="Cancel"
          customStyles={{
            dateIcon: {
              position: 'absolute',
              left: 0,
              top: 4,
              marginLeft: 0,
            },
            dateInput: {
              marginLeft: 36,
            },
          }}
          onDateChange={(date) => {
            handleChange({ date });
          }}
        />
        {touched.date && errors.date ? <Text>{errors.date}</Text> : null}
        <Button title="Submit" onPress={handleSubmit} />
      </View>
    )}
  </Formik>
);

export default MyForm;