Javascript 使用自定义输入组件时反应本机不变冲突

我正处于构建react本机应用程序的开始阶段，在我的第一个屏幕上，我想要定制输入文本字段

现在，如果我试图通过react native放置一个常规文本组件，页面上的代码将被加载，但是当我使用我创建的自定义输入组件时，它会抛出一个错误，即存在不变冲突

以下是自定义输入组件的设置：

从“React”导入React
从“react native”导入{View，Text，TextInput}
const InputCustom=（{标签，占位符，onChangeText，secureTextEntry，错误，
inputStyle、labelStyle、containerStyle、errorStyle、textAlign}）=>{
返回(
{label}
{错误}
);
};
导出{InputCustom}根据您使用导入的方式，使用

export default InputCustom;

而不是

export {InputCustom};

我在您发布的代码中发现了一些问题，我怀疑您没有在此处发布所有相关代码，例如，您正在从未提供的地方导入样式。我将你的代码复制到一个新的应用程序中并进行调试，直到得到一个不变的冲突。我怀疑你遇到的是同一个

在这种情况下，冲突是因为您要导入特定组件时，正在从
react native
导入默认值

从'react native'导入视图
应该是从'react native'导入{View}

import ScrollView from'react native'

应该是

import{ScrollView}from'react native'

此外，如另一个答案中所述，您应该使用

导出默认组件

导出自定义组件，并使用

从文件导入组件

导入自定义组件。注意，在这种情况下，我们没有使用

{}

导入组件

我还遇到了自定义组件args中缺少的

值

属性，如另一条注释中所述。我的复制完整代码如下：

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',
  },
});

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;

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;

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;

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

const styles = StyleSheet.create({

});

export default styles;

CreateAccountTextFields.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',
  },
});

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;

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;

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;

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

const styles = StyleSheet.create({

});

export default styles;

styles.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',
  },
});

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;

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;

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;

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

const styles = StyleSheet.create({

});

export default styles;

---

做出建议的更改后，错误似乎仍然存在。@AhmeeyaGoldman，另一件事，在custom component中，

值

是在props列表中声明的，对吗？很好的捕获@SivaKondapiVenkata它不是，但是错误还没有消失。很遗憾，我注意到当我将InputCustom组件导入到SignUpView时，它会加载，所以它一定与CreateAccountTextFields视图如何在数据上传输有关。哦，可能。您是否可以尝试从导入CreateAccountTextFields，而不是从导入{CreateAccountTextFields}？将导入的组件移动到括号中修复了问题。谢谢你帮助本杰明。你能给我指出正确的方向，让我了解更多关于导入默认值以及它们是什么的信息吗。google

javascript默认值导出

获得一些好的结果。特别地