css - React Native View 不包含作为 subview 编写在该 View 中的文本组件？

Question

在代码中，您可以看到我在组件中创建了一个嵌套 View ，并为父 View 设置了边框颜色为“绿色”的样式，为 subview 设置了边框颜色为“黄色”的样式。 subview 包含一些文本。我的问题是为什么文本组件不在边框内，您可以在 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 添加到此 View :

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

希望对你有帮助。