css - React Native View 不包含在该 View 中作为子项编写的 Text 组件？

Question

在代码中，您可以看到我在 Component 中创建了一个嵌套视图，并为父视图设置了边框颜色“绿色”和子视图的样式，边框颜色为“黄色”。子视图包含一些文本。我的问题是为什么文本组件不在边界内，您可以在 image_2 中看到输出？

class Header extends React.Component{
     render(){
        return(
            <View style={styles.topView}>
                <View style={styles.header}>
                    <Text>MENUBAR</Text>
                    <Text>TITLE</Text>
                    <Text>HOME</Text>
                </View>
            </View>
        )
    }
}
const styles=StyleSheet.create({
    topView:{
        backgroundColor : '#87cefa',
        borderColor : 'green',
        borderWidth : 2
    },
    header : {
        flex:1,
        flexDirection : 'row',
        marginTop : '10%',
        backgroundColor : '#FFF000',
        borderColor : 'yellow',
        borderWidth : 3,
        alignSelf : 'stretch'
    }
})

代码输入图像：-

输出图像：-

标签： cssreact-nativestylesheet

Answer 1

您可以尝试将 css 更改为此；

 topView:{
        minHeight : 90, // flex: 1 // if  you want it as full screen. 
        backgroundColor : '#87cefa',
        borderColor : 'green',
        borderWidth : 2,
        justifyContent: 'center',
        textAlign: 'center'
    },
    header : {
        flexDirection : 'row',
        backgroundColor : '#FFF000',
        borderColor : 'yellow',
        borderWidth : 3,
    }

希望这会帮助你。