Гибкость: 1 не делает родительский <View>элемент покрывающим весь экран, вместо этого сжимает все элементы до верхней части экрана

Question

Я изучаю реагирующий на себя язык и хочу, чтобы родитель динамически занимал весь экран с помощью flex вместо статического значения высоты / ширины.Он отлично работает с {height: 714, width: 393}, но когда я заменяю их на flex: 1, все элементы сжимаются до верхней части экрана.

Код

Стили:

const styles = StyleSheet.create ({container: {backgroundColor: 'purple', отступы: 5, // flex: 1, высота: 714, ширина: 393,},

bigBlackText: {
    color: 'black',
    fontSize: 18,
},

bigWhiteText: {
    color: 'white',
    fontSize: 19,
},

col1: {
    backgroundColor: 'yellow',
    flexDirection: 'row',
    flex: 1,
},

col11: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    backgroundColor: 'orange',
},

col12: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    backgroundColor: 'orange',
},

col13: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    backgroundColor: 'orange',
},

col2: {
    flex: 1,
    backgroundColor: 'red',
},

col21: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'brown',
    margin: 5
},

col22: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'brown',
    margin: 5
},

col23: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'brown',
    margin: 5
},

col3: {
    flex: 1,
    backgroundColor: 'cyan',
    flexDirection: 'column',
},

col31: {
    flexDirection: 'row',
    flex: 1,
},  

col31r1: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'green',
    margin: 5,
},

col31r2: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'green',
    margin: 5,
},

col32: {
    flexDirection: 'row',
    flex: 1,
},

col32r1: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'green',
    margin: 5,
},  

col32r2: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'green',
    margin: 5,
},

});

Ожидаемый результат

Фактический результат

Answer 1

Я не нахожу никаких проблем. Не используйте реквизиты justifycontent или alignitems в таблице стилей контейнера.

Answer 2

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default class ViewDemo extends React.Component {

    render() {
        return (
            <View style={styles.container}>

                <View style={{ flex: 1, backgroundColor: 'yellow', flexDirection: 'row', justifyContent: 'space-around' ,flexWrap: 'wrap'}}>
                    <View style={styles.h1}></View>
                    <View style={styles.h1}></View>
                    <View style={styles.h1}></View>
                </View>

                <View style={{ flex: 1, backgroundColor: 'red', flexDirection: 'column', justifyContent: 'space-around' }}>
                    <View style={styles.h2}></View>
                    <View style={styles.h2}></View>
                    <View style={styles.h2}></View>
                </View>

                <View style={{ flex: 1, alignItem:'center' , backgroundColor: '#3CAEA3', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-around' }}>
                    <View style={styles.h3}></View>
                    <View style={styles.h3}></View>
                    <View style={styles.h3}></View>
                    <View style={styles.h3}></View>
                </View>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    h1: {
        backgroundColor: '#f79c1d',
        width: 100,
        justifyContent : 'space-around',
        margin: 10
    },

    h2: {
        backgroundColor: '#9c2c2c',
        height: 50,
        justifyContent: 'space-around',
        margin: 10
    },

    h3: {
        backgroundColor: '#616f39',
        height: 90,
        width: 180,
        margin: 10
    },


});

Вы можете напрямую использовать этот код

Answer 3

попробуйте установить ширину и высоту

mainView: {
   width: "100%",
   height: "100%"
}

или

mainView: {
   width: deviceWidht,
   height: deviceHeight
}

Надеюсь, это сработает.