Question

我正在学习本机操作，希望家长使用flex动态地占据整个屏幕，而不是静态的身高/宽度值。 {height：714，width：393}可以正常工作，但是当我用flex：1替换它们时，所有元素都缩小到屏幕顶部。

样式：

常量样式= StyleSheet.create（{ 容器： { backgroundColor：“紫色”，填充：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,
},

}）;

Expected Output

Actual Output

Answer 1

尝试设置宽度和高度

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

或者

mainView: {
   width: deviceWidht,
   height: deviceHeight
}

我希望这行得通。

Answer 2

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

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


});

您可以直接使用此代码

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

3 个答案: