无法显示表单表单

Question

我正在尝试显示我的formik表单，这是我第一次使用它。然而，屏幕是完全空白的。我想这与我的造型有关，但我不确定。下面是我的代码：

export default class Checkout extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Formik
          initialValues={{first_name: '', last_name: ''}}
          onSubmit={(values) => {
            console.log(values);
          }}>
          {(props) => {
            <View>
              <TextInput
                style={styles.input}
                placeholder="first name"
                onChangeText={props.handleChange('first_name')}
                value={props.values.first_name}
              />
              <TextInput
                style={styles.input}
                placeholder="last name"
                onChangeText={props.handleChange('last_name')}
                value={props.values.last_name}
              />
              <Button
                title="place order"
                color="maroon"
                onPress={props.handleSubmit}
              />
            </View>;
          }}
        </Formik>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: 'black',
    padding: 10,
    fontSize: 18,
    borderRadius: 6,
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

由于您使用的是{}，因此应该返回类似以下内容的内容

<Formik
          initialValues={{first_name: '', last_name: ''}}
          onSubmit={(values) => {
            console.log(values);
          }}>
          {(props) => {return (<View ...} }

或者你可以在Formik中删除这些{}，然后不需要输入return语句，因为你只返回一个东西。下面是你应该做的

export default class Checkout extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Formik
          initialValues={{first_name: '', last_name: ''}}
          onSubmit={(values) => {
            console.log(values);
          }}>
          {(props) => 
            <View>
              <TextInput
                style={styles.input}
                placeholder="first name"
                onChangeText={props.handleChange('first_name')}
                value={props.values.first_name}
              />
              <TextInput
                style={styles.input}
                placeholder="last name"
                onChangeText={props.handleChange('last_name')}
                value={props.values.last_name}
              />
              <Button
                title="place order"
                color="maroon"
                onPress={props.handleSubmit}
              />
            </View>;
          }
        </Formik>
      </View>
    );
  }
}