React Native View, не состоящий из компонента Text, который записан в этом View как дочерний?

Question

В коде вы можете видеть, что я создал вложенное представление в компоненте, и стилизовал родительский вид с цветом границы «зеленый» и дочерний вид с границей цвета «желтый». Детский вид Содержит некоторый текст. Моя проблема в том, ПОЧЕМУ ТЕКСТОВЫЙ КОМПОНЕНТ НЕ ВНУТРИ ГРАНИЦЫ, вы можете увидеть результат в 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

Вы можете попробовать, изменив 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,
    }

Надеюсь, это поможет вам.

Answer 2

Вы забыли добавить flex: 1 к этому виду:

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

Надеюсь, это поможет вам.