flex:1 让我的视图在react-native中消失

Question

我是新来反应的，我试图让我的主容器的背景颜色覆盖整个屏幕，但是当我使用flex 1时，一切似乎都消失了，我见过很多人这样做，结果很好，我无法理解这个问题因为我在我的容器上使用它。

import React from 'react';
import mainstyles from '../styles/mainstyles';
import {
    Button,
    Text,
    View,
    AlertButton,
    TouchableOpacity,
  } from 'react-native';

 const UploadFile = ()=>{
     return (
        <View style={mainstyles.container}>
            <Text style={mainstyles.title}>Ocr Scan</Text>
            <Text style={mainstyles.par}>Import a file and start digitizing</Text>
            <Button 
            title="Take picture"
            />
            <Button 
            title="Upload file"
            />
        
        </View>
        
     );
 };

  export default UploadFile;

import {StyleSheet} from 'react-native'

const mainstyles=StyleSheet.create({
   container:{
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
      
   },

Answer 1

当你在组件A上使用flex时，嵌套组件A的每个组件B都需要使用flex。

Answer 2

在父元素上添加

height:'100%'

解决了我的问题。

将

height:'100%'

赋予渲染此组件的视图。

Answer 3

什么对我有用：-

1. 和标签。
2. 在这些标签内写入您的代码。

示例：-

<SafeAreaView>
    <ScrollView>
       <View style={[styles.HeadingTextBox]}>
          <Text style={[styles.HeadingFont]}>App</Text>
       </View>
    </ScrollView>
</SafeAreaView>