Блог

Я новичок в React native,

когда я создаю компонент InputField в React Native, я получаю сообщение об ошибке:

InputField.js

       import React from 'react';
      import { View, TextInput, Text } from 'react-native';
      import PropTypes from 'prop-types';
      import s from './styles';
      import { Input, Item, Label } from 'native-base';

      const InputField = ({
        label,
        inputStyle,
        containerStyle,
        touched,
        error,
        itemLabel,
        ...props
      }) => {

        let ItemData;
        let ItemInfo =
          <View>
            <Label>{label}</Label>
            <Input style={inputStyle} {...props} />
            <Text style={s.errorInput}>{touched amp;amp; error}</Text>
          </View>;

        switch (itemLabel) {
          case 'fixedLabel':
            ItemData =
              <Item fixedLabel>
                <ItemInfo />
              </Item>;
            break;
          case 'floatingLabel':
            ItemData =
              <Item floatingLabel>
                <ItemInfo />
              </Item>;
            break;
          case 'inlineLabel':
            ItemData =
              <Item inlineLabel>
                <ItemInfo />
              </Item>;
            break;
          case 'stackedLabel':
            ItemData =
              <Item stackedLabel>
                <ItemInfo />
              </Item>;
            break;

          default:
            ItemData =
              <Item >
                <Label>{label}</Label>
                <Input style={inputStyle} {...props} />
                <Text style={s.errorInput}>{touched amp;amp; error}</Text>
              </Item>;
        }
        return (
          <View style={s.containerStyle}>
            <ItemData />
          </View>
        );
      };


      // this made me thing about TypeScript
      // and what it was created to solve😅
      const stylePropsType = PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.object),
        PropTypes.object,
      ]);

      InputField.propTypes = {
        inputStyle: stylePropsType,
        containerStyle: stylePropsType,
        ...TextInput.propTypes, // this makes the InputField component have proptypes of Textinput
      };
      InputField.defaultProps = {
        inputStyle: s.input,
        containerStyle: s.containerStyle,
        touched: false,
        error: null,
      };

      export default InputField;
 

Пожалуйста, помогите мне разобраться в моей ошибке.

Я смог упростить ваш компонент, и, похоже, это сработало.

 const knownItemLabels = ['fixedLabel', 'floatingLabel', 'inlineLabel', 'stackedLabel'];

const InputField = ({
  label,
  inputStyle,
  containerStyle,
  touched,
  error,
  itemLabel,
  ...props
}) => {

  const itemProp = knownItemLabels.includes(itemLabel)
  ? { [itemLabel]: true }
  : {};

  return (
    <View style={s.containerStyle}>
       <Item {...itemProp}>
          <Label>{label}</Label>
          <Input style={inputStyle} {...props} />
          <Text style={s.errorInput}>{touched amp;amp; error}</Text>
      </Item>
    </View>
  );
};
 

Попробуйте это, измените <view> to <View>

   let ItemInfo =
              <View>
                <Label>{label}</Label>
                <Input style={inputStyle} {...props} />
                <Text style={s.errorInput}>{touched amp;amp; error}</Text>
              </View>;