不变违反：使用React-Toggle库时，找不到Redux表单名称输入的视图配置

Question

我正在尝试使用Redux Form在React-Native上渲染一个Form，并接受用于文本输入，datePicker，imagePicker和切换的组件。我似乎能够通过Redux表单传递道具（即Reducer正在工作），并且我的所有输入字段都在工作，除了Component = ToggleInput字段。

运行react-native命令时，我不断收到错误消息：

  

不变违反：找不到名称输入的视图配置。

尽管我的console.log(this.props.input.name)返回了名称GENDER，但这仍然存在。完全不确定为什么会出现此错误。

由于我是React-native和Redux Form的新手，因此，衷心感谢您对可能出问题的任何见解。

这是我的Redux表单，称为Register.js。

import React, { Component, Fragment } from 'react';
import { Field, reduxForm } from 'redux-form';
import { View, Text, Form, Button, Icon } from 'native-base';
import { StyleSheet, PixelRatio } from 'react-native';
import FormInput from '../FormElements/FormInput';
import MyDatePicker from '../components/MyDatePicker';
import moment from 'moment';
import ImagePick from '../components/ImagePick';
import ToggleInput from '../components/ToggleInput';

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },

  imageContainer: {
    borderRadius: 50,
    aspectRatio: 1,
    width: 100,
    height: 100,
    borderColor: 'blue',
    borderWidth: 1 / PixelRatio.get(),
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
});

const validate = values => {
  const errors = {};
  return errors;
};

const Register = props => {
  const { handleSubmit, submitting, isLoading } = props;
  return (
    <Form style={{ flex: 1, flexDirection: 'column', padding: 25, paddingTop: 25 }} onSubmit={handleSubmit}>
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <Field component={ImagePick} name="USERPHOTO" />
        </View>
      </View>
      <View>
        <Field component={FormInput} name="USERNAME" type="text" placeholder="USERNAME" />
      </View>
      <View>
        <Field component={FormInput} name="FIRSTNAME" type="text" placeholder="FIRSTNAME" />
      </View>
      <View>
        <Field component={FormInput} name="FAMILYNAME" type="text" placeholder="FAMILYNAME" />
      </View>
      <View>
        <Field component={FormInput} name="EMAIL" type="email" placeholder="EMAIL ADDRESS" />
      </View>
      <View>
        <Field component={ToggleInput} name="GENDER" type="icon" id="id"/>
      </View>
      <Button block style={{ marginTop: 10, backgroundColor: 'transparent', borderColor: 'grey', borderWidth: 1, borderRadius: 20 }}>
        <Field component={MyDatePicker} placeholder="BIRTH DATE" name="BIRTH DATE" label="Date" normalize={value => (value ? moment(value).format('DD-MM-YYYY') : null)} />
      </Button>
      <View>
        <Button block style={{ borderRadius: 20, marginTop: 10, backgroundColor: 'blue' }} type="submit" disabled={submitting || isLoading}>
          <Text>REGISTER</Text>
        </Button>
      </View>
    </Form>
  );
};

export default reduxForm({
  form: 'Register',
  validate
})(Register);

这是组件ToggleInput.js。

import React, { Component } from 'react';
import Toggle from 'react-toggle';
import { View } from 'native-base';
import PropTypes from 'prop-types';

class ToggleInput extends Component {
  static propTypes = {
    input: PropTypes.shape({
      onChange: PropTypes.func.isRequired,
      name: PropTypes.string
    }).isRequired,
    meta: PropTypes.shape({
      touched: PropTypes.bool,
      error: PropTypes.bool,
      warning: PropTypes.bool
    })
  };

  render() {
    const {
      id,
      input: { name, onChange, value },
      meta: { touched, error, warning }
    } = this.props;
    console.log('this.props.input.name,', this.props.input.name);
    console.log('this.props.input.value,', this.props.input.value);
    return (
      <View>
        <Toggle
          name={name}
          value={value}
          id={id}
          checked={true}
          value="yes"
          onChange={onChange}
          icons={false}
          disabled={false}
        />
        {touched &&
          ((error && <span style={{ color: 'red' }}>{error}</span>) ||
            (warning && <span>{warning}</span>))}
      </View>
    );
  }
}
export default ToggleInput;