嗨,我是React Native的新手,并尝试使用该应用程序创建一个android应用。如果我更改视图的样式->(backgroundColor或borrderBottom),则不会渲染。任何地方都没有错误,但是在重新加载js包时,视图及其所有子级都无法呈现。除了解决这个特定问题外,我对了解为什么会发生或我是否缺少某些东西更感兴趣。我的全部内容如下
import React from 'react';
import { StyleSheet, View, Text, PixelRatio, TextInput } from 'react-native';
const styles = {
container: {
paddingTop: 70,
flex: 1,
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '#fff',
},
form: {
flex: 1,
flexDirection: 'column'
},
rowContainer: {
//backgroundColor: '#000',
},
row: {
flexDirection: 'row',
height: 44,
alignItems: 'center',
},
inputLabel: {
fontSize: 15,
paddingLeft: 15,
color: '#333'
},
textInputStyle: {
fontSize: 15,
flex: 1,
paddingLeft: 15
}
};
export default function TestComponent(props) {
return (
<View style={styles.container}>
<Text> Inside Container </Text>
<View style={styles.form}>
<Text> Inside Form </Text>
<View style={styles.rowContainer} >
<Text> Inside Row Container </Text>
<View style={styles.row}>
<Text numberOfLines={1} style={styles.inputLabel}> Bid On </Text>
<TextInput />
</View>
</View>
</View>
</View>
);
}
上面的代码可以完美地工作,并且所有组件都已呈现,但是,如果我更改
rowContainer
样式并且取消注释backgroundColor
,rowContainer
及其所有子代,则不会呈现。我不知道为什么会这样。我也在rowContainer内尝试了其他样式,例如rowContainer: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#000'
borderBottomWidth: 1,
borderColor: '#c8c7cc'
}
只要
rowContainer
样式为空,它就会起作用,如果我在其中添加任何内容,该视图就不会渲染。 最佳答案
默认的文本颜色为黑色,并且rowContainers backgroundColor设置为“#000”。因此,它似乎没有被渲染。