javascript - 使用自定义输入组件时违反 React-Native 不变性
问题描述
我正处于构建 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
解决方案
根据您使用导入的方式,使用
export default InputCustom;
代替
export {InputCustom};
推荐阅读
- bash - 你可以从 bash 执行 aq 函数吗?
- java - REPOSTING - SSL Pinning 以避免 mitm 和加密 api 请求/响应
- c++ - QPalette 传播到 QDialog 不起作用
- javascript - NX Angular Workspace - 无法创建(赛普拉斯权限错误)
- python - 导出具有透明背景的 matplotlib
- python - 查找每一行的最大值 - Pandas 数据框
- .net-core - .NET Core CAP 与 RabbitMQ 多集群配置
- javascript - 如何循环创建 html 卡片 + 循环 JS 对象以从中提取数据?
- angular - NgRx 中的 Reducer 在连续调度第二个操作后采用旧状态
- iis - 仅显示前 20 个字符的错误警报。IIS 上的动态网络