我是个新来的土生土长的人.我试图在出现错误时更改TextInput的样式.
我怎样才能让我的代码不那么难看？
<TextInput
style={touched && invalid?
{height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, borderWidth: 2, borderColor: 'red'} :
{height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10}}
</TextInput>
用StyleSheet.create来做这样的风格组合，
制作text、valid text和invalid text的样式.
const styles = StyleSheet.create({
text: {
height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10,
},
textvalid: {
borderWidth: 2,
},
textinvalid: {
borderColor: 'red',
},
});
然后用一系列样式将它们组合在一起.
<TextInput
style={[styles.text, touched && invalid ? styles.textinvalid : styles.textvalid]}
</TextInput>
对于数组样式，后一种样式将合并到前一种样式中，对相同的键使用覆盖规则.