Почему мой текст не отображается в импортированном представлении? - PullRequest
Новая
       18

Почему мой текст не отображается в импортированном представлении?

0 голосов
/ 07 января 2020

Я импортировал простое представление с именем 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'
    }
});

Снимок экрана с результатом:

текст, не отображаемый на экране

1 Ответ

0 голосов
/ 07 января 2020

Вам нужно отрендерить props.children в вас BackgroundContainer. 

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

См. Краткое введение в props.children от React

...