如何在本机反应中计算（）高度以进行样式设置答案

【问题标题】：How to calc() height in react native for styling如何在本机反应中计算（）高度以进行样式设置
【发布时间】：2020-06-29 04:22:29
【问题描述】：

有一个灰色的方块用来放置 4 个小方块
有一个黑色方块，黑色方块的每边中心有4个小方块。
对于普通网页，我可以通过计算宽度来做到这一点
但是我应该怎么做？

请查看codepen中的代码：Codepen

index.html

<!DOCTYPE html>

<head>
    <title>squares in square</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class='container'>
        <div class='invisiblesquare'>
            <div class='bigsquare'></div>
            <div class='col1'>
                <div class="smallsquare"></div>
            </div>
            <div class='col2'>
                <div class="smallsquare"></div>
                <div class="smallsquare"></div>
            </div>
            <div class='col3'>
                <div class="smallsquare"></div>
            </div>
        </div>
    </div>
    </div>


</body>

</html>

style.css

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;

}
.invisiblesquare{
    position: relative;
    height: 20%;
    width:20%;
    border: 1px solid grey;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bigsquare{
    position: absolute;
    width: calc(100% - 22px);
    height: calc(100% - 22px);
    border: 1px solid black;
}
.col1{
    height: 20px
}
.col2{
    height: calc(100% - 22px);
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.col3{
    height: 20px
}

.smallsquare{
    height: 20px;
    width: 20px;
    border: 1px solid black
}

【问题讨论】：

标签： css react-native styles stylesheet calc

【解决方案1】：

您可以使用获取屏幕尺寸，

import {Dimensions} from 'react-native';

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

然后你可以进行如下计算，

width: screenWidth - 20

希望对你有所帮助。

【讨论】：

感谢您的回复，是否对代码结构有任何意见，以便可以使用其他方法。
@GGprogram 对您的评论有点困惑。你到底想达到什么目标？

【解决方案2】：

useWindowDimensions 会在 屏幕尺寸 更改时自动更新 width 和 height 值。您可以像这样获取应用程序窗口的宽度和高度：

import {useWindowDimensions} from 'react-native';

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

这是一个例子

https://snack.expo.io/@asad_4561/87dc08?session_id=snack-session-FGVnhyoDp&preview=true&platform=web&iframeId=ufwds87fh5&supportedPlatforms=ios,android&name=useWindowDimensions&description=Example%20usage&waitForData=true

【讨论】：