Flex:1 不让父 <View> 元素覆盖整个屏幕，而是将所有元素缩小到屏幕顶部

Question

我正在学习 react-native，并且希望 Parent 使用 flex 而不是静态的高度/宽度值动态地占据整个屏幕。它适用于 {height:714, width:393}，但是当我用 flex:1 替换它们时，所有元素都会缩小到屏幕顶部。

Code

样式：

const 样式 = StyleSheet.create({ 容器： { 背景颜色：'紫色'， 填充：5， // 弹性：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,
},

});

Expected Output

Actual Output

Answer 1

我发现没有问题。不要在容器样式表中使用justifycontent 或alignitems 道具。

Answer 2

尝试设置宽度和高度

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

或者，

mainView: {
   width: deviceWidht,
   height: deviceHeight
}

我希望这行得通。

Answer 3

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
    },


});

你可以直接使用这段代码