reactjs - 里面的文字在 react-native 中，标签未显示在屏幕上

Question

我是 react-native 的新手，并且正在学习教程。出于某种原因，当我为容器设置 flex:1 时，<View> 内的 <Text> 标记中的文本不会显示在屏幕上。但是当我注释掉它时，我可以看到文字。

这是代码。

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

export default function SignInScreen(){
    return(
        <View style = {styles.container}>

            <View style ={{marginLeft:20, marginTop:10}}>
                 <Text style = {styles.title}>Sign-In</Text>
            </View>

            <View style = {{alignItems:"center",marginTop:10}}>
                <Text style = {styles.text1}>Please Enter email address</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex:1
    },
    title: {
        color:"#ff8c52",
        fontSize :20,
        fontWeight:"bold"
    },
    text1: {
        color: "#ff8c52",
        fontSize:16
    }
})

有人可以解释为什么会这样吗？

标签： reactjsreact-native

Answer 1

Flexbox 会填充其父组件给它的区域，因此请确保父组件也使用 flex 或对其有体积。