正文 

当前位置： 首页 > 知识 >

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

     2023-02-23     260

关键词：

【中文标题】使用自定义输入组件时的 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：使用自定义 TextInput 组件添加文本限制指示器

】React-Native：使用自定义TextInput组件添加文本限制指示器【英文标题】：React-Native:AddingtextlimitIndicatorwithacustomTextInputcomponent【发布时间】：2021-10-0919:30:20【问题描述】：我想要完成的是一个textInput，它在自身的一侧显示一个类似... 查看详情

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

】使用动态组件和自定义事件时的VueJS警告【英文标题】：VueJSwarningwhenusingdynamiccomponentsandcustom-events【发布时间】：2021-04-0918:57:23【问题描述】：所以，我收到了这个警告："无关的非发射事件侦听器(addNewResource)已传递给组件，... 查看详情

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

】无法在React-native中更改自定义组件的宽度和高度？【英文标题】：CannotchangewidthandheightofcustomcomponentinReact-native?【发布时间】：2018-05-0121:18:36【问题描述】：我有一个最小的自定义无状态组件，如下所示：constViewBox=(props)=>(<... 查看详情

react-native自定义下拉刷新/上拉加载更多组件(代码片段)

1.封装Scroller组件/***下拉刷新/上拉加载更多组件(Scroller)*/importReact,Componentfrom‘react‘;importStyleSheet,Text,View,ListView,ActivityIndicator,RefreshControl,from‘react-native‘;exportdefaultclassScrollerextend 查看详情

未知的自定义元素：使用 vuetify 组件时的 <v-app>

】未知的自定义元素：使用vuetify组件时的<v-app>【英文标题】：Unknowncustomelement:<v-app>whenusevuetifycomponents【发布时间】：2021-06-0201:52:04【问题描述】：我是vuejs的新手。我尝试使用vue和vuetify创建一个日历应用程序，但在控... 查看详情

如何在反应中使用自定义可重用组件作为输入字段

】如何在反应中使用自定义可重用组件作为输入字段【英文标题】：Howtousecustomresuablecomponentsasinputfieldsinreact【发布时间】：2021-09-1004:07:15【问题描述】：我在这里创建了一个可重用组件，该组件负责创建输入字段和标签。我想... 查看详情

使用自定义挂钩时的重新渲染问题

】使用自定义挂钩时的重新渲染问题【英文标题】：Rerenderingproblemwhenusingacustomhook【发布时间】：2021-12-0618:16:32【问题描述】：我有这个自定义钩子useCountDown，它基本上是一个倒数计时器，我在InputInvestment组件上使用它em>我使... 查看详情

使用 declare styleable 设置自定义组件输入类型

】使用declarestyleable设置自定义组件输入类型【英文标题】：Usedeclarestyleabletosetcustomcomponentinputtype【发布时间】：2012-04-0117:26:43【问题描述】：我有一个CompositeComponent(EditText+ImageButton)单击按钮时，edittext内容将被清除。它工作正... 查看详情

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

】带有Typescript的React-Native自定义文本组件：“将React.ReactNode类型转换为文本类型......”【英文标题】：React-NativecustomTextcomponentwithTypescript:"ConversionoftypeReact.ReactNodetotypeText..."【发布时间】：2020-12-2401:16:48【问题描述】：... 查看详情

使用自定义文本输入时如何更改文本输入的焦点

】使用自定义文本输入时如何更改文本输入的焦点【英文标题】：Howtochangethefocusoftextinputwhenusingcustomtextinput【发布时间】：2021-06-0709:08:23【问题描述】：1.这是我的自定义文本输入自定义组件，我定义了我想要使用的propsref父组... 查看详情

react-native自定义倒计时按钮

...demo使用的是0.45版本的RN，改起来很是麻烦。于是就参考react-native-CountDowntimer实现了一下倒计时按钮，效果还不错~我们将要使其样式、提示文字及显示方式可以自定义。那就要将文字样式，提示文字(包括显示的时间数字，时间单... 查看详情

Vue：从自定义组件派生的自定义组件中的 v-model 和输入事件

...具并在输入事件上发出一个输入事件。我可以毫无问题地使用此自定义输入与模型，现在我正在创建一个自定义密码输入，我将其初始化为自 查看详情

如何在 react-native 中为 webView 请求设置自定义标头

】如何在react-native中为webView请求设置自定义标头【英文标题】：HowtosetacustomheaderforwebViewrequestsinreact-native【发布时间】：2016-08-1514:18:07【问题描述】：我希望能够在我的ruby​​onrails服务器端检测到http请求来自我应用程序中的web... 查看详情

将自定义组件呈现为列表项

...发布时间】：2020-12-1117:07:13【问题描述】：所以我试图在React-Native的特定屏幕上呈现过滤后的数据列表。我遇到了一个问题Error:ObjectsarenotvalidasaReactchild(found:objectwithkeys_40,_65,_55,_72)但是，如果我使用常规的&lt; 查看详情

Angular：使用 ControlValueAccessor 自定义输入

】Angular：使用ControlValueAccessor自定义输入【英文标题】：Angular:custominputwithControlValueAccessor【发布时间】：2019-11-0206:04:00【问题描述】：如果自定义组件是另一个组件下的包装器，我不确定如何使用它。喜欢：ComponentA_withForm|--Comp... 查看详情

如何覆盖现有的 react-native 原生组件

】如何覆盖现有的react-native原生组件【英文标题】：Howtooverrideexistingreact-nativenativecomponents【发布时间】：2015-10-0913:20:40【问题描述】：react-native中有MapView模块。(RCTMapManager模块)目前不支持注释的自定义视图。是否可以在自定义... 查看详情

创建vue组件与自定义一个vue组件时的区别

在已有dom元素上创建一个vue组件<divid="app">   </div> var app= new Vue(  el:‘#app‘,  data:    message:‘‘,  )&nbs 查看详情

如何在 Angular 中处理自定义输入组件上的输入事件？

...【发布时间】：2020-01-1705:44:25【问题描述】：我正在尝试使用Angular7中的ReativeForm创建自定义输入组件，但我无法将事件传递到输入字段。我的component有一个标签、一个输入字段和一个特定的布局。我的componenthtm 查看详情