如何在 React Native 中计算（）高度以进行样式设置

Question

4个小方块的位置有一个灰色方块
有一个黑色方块，黑色方块的每边中心有4个小方块。
对于普通网页，我可以通过计算宽度来完成
但是我应该如何在 react native which calc(100% - 20) 在那里不起作用

请查看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
}

Answer 1

您可以使用

获取屏幕尺寸

import {Dimensions} from 'react-native';

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

那么你可以按照下面的方式进行计算，

width: screenWidth - 20

希望对您有所帮助。

Answer 2

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

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

如何在 React Native 中计算（）高度以进行样式设置

How to calc() height in react native for styling

css

styles

stylesheet

calc

react-native