使用Formik将属性向下传递到组件来对本机多页面表单进行反应

Question

我正在尝试使用Formik和React Native创建多页表单

使用状态和数组方法，我可以呈现多页。但是，要使用formik，我需要将道具向下传递到我的组件，即Page1，Page2，Page3

任何人都不知道该如何实现？

我正在尝试将props传递给Page1.js，以便将props.handleChange，props.handBlur，props.values ....与Formik一起使用

预先感谢

WizardScreen.js

import React, { Component } from "react";
import { View, TextInput, StyleSheet } from "react-native";
import { Button } from "react-native-elements";
import { Formik } from "formik";

import Input from "./Input";
import { Page1 } from "./Page1";
import { Page2 } from "./Page2";
import { Page3 } from "./Page3";

const pages = [<Page1 />, <Page2 />, <Page3 />];
class WizardScreen extends Component {
  state = {
    page: 0
  };

  _handleSubmit = async (values, bag) => {
    try {
      console.log(values);
    } catch (error) {
      bag.setSubmitting(false);
      bag.setErrors(error);
    }
  };

  _nextPage = () => {
    this.setState(state => ({ page: state.page + 1 }));
  };

  render() {
    const { container, buttonStyle } = styles;

    return (
      <Formik
        initialValues={{ name: "", email: "", info: "" }}
        onSubmit={values => console.log(values)}
      >
        {props => (
          <View style={container}>
            {pages[this.state.page]}
            <TextInput
              placeholder="Input"
              onChangeText={props.handleChange("email")}
              onBlur={props.handleBlur("email")}
              value={props.values.email}
            />
            {this.state.page === pages.length - 1 ? (
              <Button
                style={buttonStyle}
                onPress={props.handleSubmit}
                title="Submit"
              />
            ) : (
              <Button
                title="Next Page"
                style={buttonStyle}
                onPress={this._nextPage}
              />
            )}
          </View>
        )}
      </Formik>
    );
  }
}

Page1.js

import React from "react";
import { Text } from "react-native";

export const Page1 = props => {
  console.log(props);
  return (
    <React.Fragment>
      <Text>Page 1</Text>
    </React.Fragment>
  );
};