反应本机视图不包含在该视图中作为子级编写的文本组件吗？

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'
    }
})

代码输入图像：-

输出图像：-

Answer 1

您忘记将flex：1添加到该视图：

topView:{
    flex:1,
    backgroundColor : '#87cefa',
    borderColor : 'green',
    borderWidth : 2
},

希望对您有帮助。

Answer 2

您可以通过将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,
    }

希望这会对您有所帮助。