使用自定义输入组件时，本机不变性违规

Question

我正处于构建本机应用程序的开始阶段，在我的第一个屏幕上，我想拥有自定义输入文本字段。

截至目前，如果我尝试通过react-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

根据您使用导入的方式，使用

Answer 2

我发现您发布的代码有很多问题，我怀疑您没有在此处发布所有相关代码，例如您是从没有提供的地方导入样式。我将您的代码复制到一个新的应用程序中并进行调试，直到遇到不变的违规情况为止。我怀疑是您遇到的同一个人。