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

【问题标题】：Why is my text not being displayed in my imported view?为什么我的文本没有显示在我的导入视图中？
【发布时间】：2020-04-25 09:24:21
【问题描述】：

我导入了一个名为 BackgroundContainer 的简单视图，我想将其用作许多屏幕的背景组件。但是我输入的所有内容都不会显示，并且内容似乎被视图覆盖。为什么会这样？如果我为视图手动设置样式并且不导入它，如下面的 cmets 所示，它将起作用。

这是组件导入到的屏幕：

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

【问题讨论】：

标签： react-native text view components overlay

【解决方案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

【讨论】：