Реагирующее собственное нарушение инварианта при использовании пользовательского компонента ввода

Question

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

На данный момент код на странице будет загружаться, если я попытаюсь поместить обычный текстовый компонент с помощьюact-native, но когда я использую пользовательский компонент ввода, который я создал, он выдает ошибку, что есть инвариант нарушение.

Вот настройка компонента пользовательского ввода:

import React from 'react'
import {View, Text, TextInput} from 'react-native'

const InputCustom = ({label, placeholder, onChangeText,secureTextEntry,error,
    inputStyle, labelStyle,containerStyle,errorStyle,textAlign}) => {
        return(
            <View style={containerStyle}>
            <Text style={labelStyle}>{label}</Text>
            <TextInput
            secureTextEntry={secureTextEntry}
            placeholder={placeholder}
            autoCorrect={false}
            style={inputStyle}
            value={value}
            textAlign={textAlign}
            onChangeText={onChangeText}
            />
            <Text style={errorStyle}>{error}</Text>
            </View>
        );
    };

    export {InputCustom};

Вот пользовательский компонент, используемый в пользовательском представлении

import React from 'react'
import View from 'react-native'
import InputCustom from '/Users/tmi/Documents/Mobile Applications/myproject/src/components/common/InputCustom.js'

const CreateAccountTextFields = (props) => {
    return(
            <View>
            <View>
                <InputCustom
                label ="First Name"
                placeholder="First Name"
                value={props.firstName}
                inputStyle ={props.inputStyle}
                containerStyle={props.containerStyle}
                labelStyle={props.labelStyle}
                textAlign={props.textAlign}
                onChangeText={props.fNameOnChange}
                
            />
            </View>
            </View>
    )
}

export default CreateAccountTextFields

Наконец, вот страница, которую просматривал бы пользователь, выдающий фактическую ошибку

import React, {Component} from 'react'
import ScrollView  from 'react-native'
import {CreateAccountTextFields} from '/Users/tmi/Documents/Mobile Applications/myproject/src/components/applaunch/signup/CreateAccountTextFields.js'
import SignUpTextFieldStyleStyles from '../../styles/SignUp/SignUpTextFieldStyle.styles'

// This is the Sign Up Page a User will see on their screen with all elements added to this screen 

class SignUpView extends Component {
    constructor(props){
        super(props)
        this.state={
            firstName: '',
        }
    }
    static navigationOptions = {
        title: 'The Test ',
        headerStyle: {backgroundColor: 'black'}, 
        headerTitleStyle: {color: 'white', fontFamily: 'Impact', fontSize: 30} ,
      };
      render(){
          return(
              <ScrollView>
                <CreateAccountTextFields
                firstName={"this.props.firstName"}
                inputStyle={SignUpTextFieldStyleStyles.shortInputStyle}
                containerStyle={SignUpTextFieldStyleStyles.shortInputContrainerStyle}
                labelStyle={SignUpTextFieldStyleStyles.shortInputLabelStyle}
                textAlign={SignUpTextFieldStyleStyles.inputTextAlign}
                errorStyle={SignUpTextFieldStyleStyles.error}
                />
            </ScrollView>
          )
      }
}
export default SignUpView

Answer 1

Я вижу несколько проблем с кодом, который вы разместили, и я подозреваю, что вы не разместили здесь весь соответствующий код, например, вы импортируете стили из того места, которое вы не предоставили. Я скопировал ваш код в приложение fre sh и отлаживал, пока не получил нарушение инварианта. Я подозреваю, что это тот же самый файл, с которым вы работаете.

В этом случае нарушение заключается в том, что вы импортируете значения по умолчанию из react-native, когда хотите импортировать определенные c компоненты.

import View from 'react-native' должно быть import { View } from 'react-native'

import ScrollView from 'react-native' должно быть import { ScrollView } from 'react-native'

Кроме того, как уже упоминалось в другом ответе, вы должны экспортировать свои пользовательские компоненты, используя export default COMPONENT и импортируйте их с помощью import COMPONENT from FILE. Обратите внимание, что в этом случае мы не используем {} для импорта компонента.

Я также натолкнулся на отсутствующую опору value в аргументах пользовательского компонента, как упомянуто в другом комментарии. Полный код моего репорта здесь:

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import SignUpView from "./components/SignUpView";

export default function App() {
  return (
    <View style={styles.container}>
      <SignUpView />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

InputCustom.js

import React from 'react'
import {View, Text, TextInput} from 'react-native'

const InputCustom = ({label, placeholder, onChangeText,secureTextEntry,error, inputStyle, labelStyle,containerStyle,errorStyle,textAlign, value}) => {
    return(
        <View style={containerStyle}>
            <Text style={labelStyle}>{label}</Text>
            <TextInput
                secureTextEntry={secureTextEntry}
                placeholder={placeholder}
                autoCorrect={false}
                style={inputStyle}
                value={value}
                textAlign={textAlign}
                onChangeText={onChangeText} />
            <Text style={errorStyle}>{error}</Text>
        </View>
    );
};

export default InputCustom;

CreateAccountTextFields.js

import React from 'react'
import { View } from 'react-native'
import InputCustom from './InputCustom.js'

const CreateAccountTextFields = (props) => {
    return (
        <View>
            <View>
                <InputCustom
                label ="First Name"
                placeholder="First Name"
                value={props.firstName}
                inputStyle ={props.inputStyle}
                containerStyle={props.containerStyle}
                labelStyle={props.labelStyle}
                textAlign={props.textAlign}
                onChangeText={props.fNameOnChange} />
            </View>
        </View>
    );
}

export default CreateAccountTextFields;

SignUpView.js

import React, {Component} from 'react'
import { ScrollView }  from 'react-native'
import CreateAccountTextFields from './CreateAccountTextFields.js'
import styles from '../styles/styles';

class SignUpView extends Component {
    constructor(props){
        super(props)
        this.state={
            firstName: '',
        }
    }

    render(){
        return(
            <ScrollView>
              <CreateAccountTextFields
              firstName={"this.props.firstName"}
              inputStyle={styles.shortInputStyle}
              containerStyle={styles.shortInputContrainerStyle}
              labelStyle={styles.shortInputLabelStyle}
              textAlign={styles.inputTextAlign}
              errorStyle={styles.error}
              />
          </ScrollView>
        )
    }
}
export default SignUpView;

styles.js

import React from 'react';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({

});

export default styles;

Answer 2

В зависимости от того, как вы используете импорт, используйте

export default InputCustom;

вместо

export {InputCustom};