react-native - 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',
      
   },

标签： react-native

Answer 1

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