使用自定义输入组件时的 React-Native 不变违规

Posted

技术标签:

【中文标题】使用自定义输入组件时的 React-Native 不变违规【英文标题】:React-Native Invariant Violation When Using Custom Input Component 【发布时间】:2020-07-02 09:21:48 【问题描述】:

我正处于构建 react-native 应用程序的开始阶段,在我的第一个屏幕上,我想要自定义输入文本字段。

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

【问题讨论】:

【参考方案1】:

我发现您发布的代码存在几个问题,我怀疑您没有在此处发布所有相关代码,例如您正在从您没有提供的地方导入样式。我将您的代码复制到了一个新的应用程序中并进行了调试,直到出现不变违规。我怀疑这就是你遇到的那个。

在这种情况下,违规是因为您在要导入特定组件时从 react-native 导入默认值。

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 导入它们。请注意,在这种情况下,我们没有使用 来导入组件。

如另一条评论中所述,我还遇到了自定义组件 args 中缺少的 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;

【讨论】:

将导入的组件移动到括号中解决了这个问题。谢谢你帮助本杰明。您能否为我指明正确的方向,以了解有关导入默认值及其含义的更多信息。 google javascript default exports 以获得一些好的结果。特别是24ways.org/2014/javascript-modules-the-es6-way【参考方案2】:

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

export default InputCustom;

而不是

export InputCustom;

【讨论】:

建议更改后,错误似乎仍然存在。 @AhmeeyaGoldman,另一件事,在自定义组件中,value 是在 props 列表中声明的,对吗? 很好 @SivaKondapiVenkata 它不是但遗憾的是错误还没有消失。 我注意到,当我将 InputCustom 组件导入 SignUpView 时,它会加载,因此它必须与 CreateAccountTextFields 视图如何传输数据有关。 哦,可能。你可以试试import CreateAccountTextFields from 代替import CreateAccountTextFields from 吗?

以上是关于使用自定义输入组件时的 React-Native 不变违规的主要内容,如果未能解决你的问题,请参考以下文章

React-Native:使用自定义 TextInput 组件添加文本限制指示器

无法在 React-native 中更改自定义组件的宽度和高度?

react-native 自定义 下拉刷新 / 上拉加载更多 组件

react-native 自定义倒计时按钮

带有 Typescript 的 React-Native 自定义文本组件:“将 React.ReactNode 类型转换为文本类型......”

使用动态组件和自定义事件时的 VueJS 警告