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

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",
    }
});

这里是组件:

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

您需要在 BackgroundContainer 中呈现 props.children。

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

见A quick intro to React’s props.children

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

Why is my text not being displayed in my imported view?

text

components

overlay

view

react-native