有一个灰色方块放置 4 个小方块
有一个黑色方块，在黑色方块的每边中心有4个小方块。
对于普通网页，我可以通过计算宽度来完成
但是我应该如何在 react native 中做到这一点，其中 calc(100% - 20) 在那里不起作用
请检查codepen中的代码:Codepen
索引.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>
样式文件
.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
希望这对你有帮助。
关于css - 如何在原生样式中计算()高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60733361/