react-native - 使用 Formik 将 Props 向下传递给组件来反应本机多页表单

Question

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

使用状态和数组方法，我能够呈现多页。但是，要使用 formik，我需要将道具传递给我的组件，即 Page1、Page2、Page3

任何人都知道如何实现这一目标？

我试图将道具传递给 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>
  );
};