为什么我的文本未显示在导入的视图中？

Question

我导入了一个名为BackgroundContainer的简单视图，我想将其用作许多屏幕的背景组件。但是我输入的所有内容都不会显示，并且似乎内容视图已覆盖该视图。为什么这样呢？如果我为视图手动设置样式并且不按照下面的注释所示导入它，则可以正常工作。

这里是组件导入到的屏幕：

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

import BackgroundContainer from '../components/BackgroundContainer';

export default function Leaderboard(props) {

    return (
        <BackgroundContainer>   
        {/*if you replace this with "<View style={styles.container2}></View>" it's working*/}
            <View style={styles.container}>
                <Text>Leaderboard</Text>   
                {/*not displayed*/} 
            </View>
        </BackgroundContainer>

    );

}

const styles = StyleSheet.create({
    container: {
        paddingTop: 60,
        alignItems: 'center',
    },
    container2: {
        flex: 1,
        backgroundColor: '#EFFBEF', alignItems: 'center', justifyContent: 'center'
    },
    text: {
        fontSize: 42,
        color: "black",
        padding: 5,
        margin: 10,
        backgroundColor: "red",
    }
});

这里是component：

import React from 'react';
import {StyleSheet, View, Text} from 'react-native';

export default function BackgroundContainer(props) {
    return (
        <View style={styles.container}></View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#EFFBEF',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

结果截图：

text not displaying on screen

Answer 1

您需要在props.children中渲染BackgroundContainer。

export default function BackgroundContainer(props) {
    return (
        <View style={styles.container}>{props.children}</View>
    );
}