有一个灰色的正方形，它放置了四个小正方形有一个黑色正方形，黑色正方形的每一侧中心都有4个小正方形。对于普通的网，我可以通过计算宽度来做到但是，我该如何在calc（100％-20）无法正常工作的本地反应中执行此操作
请检查代码笔中的代码：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
}
您可以使用获取屏幕尺寸，
import {Dimensions} from 'react-native';
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
然后您可以按照以下方式进行计算，
width: screenWidth - 20
希望对您有帮助。