Css 如何在react native for Styleing中计算（）高度_Css_React Native_Styles_Stylesheet_Calc

Css 如何在react native for Styleing中计算（）高度

css react-native

Css 如何在react native for Styleing中计算（）高度,css,react-native,styles,stylesheet,calc,Css,React Native,Styles,Stylesheet,Calc,有一个灰色正方形，用于定位4个小正方形有一个黑色正方形，在黑色正方形的每边中心将有4个小正方形。对于普通的web，我可以通过计算宽度来实现但是，我应该如何在哪一个calc（100%-20）不起作用的情况下进行呢请检查代码笔中的代码： index.html <!DOCTYPE html> <head> <title>squares in square</title> <link rel="stylesheet" hre

有一个灰色正方形，用于定位4个小正方形
有一个黑色正方形，在黑色正方形的每边中心将有4个小正方形。
对于普通的web，我可以通过计算宽度来实现
但是，我应该如何在哪一个calc（100%-20）不起作用的情况下进行呢

请检查代码笔中的代码：

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>

您可以使用

import {Dimensions} from 'react-native';

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

然后你可以做如下计算

width: screenWidth - 20

希望这对您有所帮助。

使用WindowDimensions

在屏幕大小更改时自动更新
宽度和高度值。您可以获得应用程序窗口的宽度和高度，如下所示： import {useWindowDimensions} from 'react-native'; const windowWidth = useWindowDimensions().width; const windowHeight = useWindowDimensions().height; 这是一个例子谢谢您的回复，是否有任何关于代码结构的评论，以便可以使用其他方法。@GGprogram对您的评论有点困惑。你到底想要实现什么？ import {useWindowDimensions} from 'react-native'; const windowWidth = useWindowDimensions().width; const windowHeight = useWindowDimensions().height;