GG *_*ram 2 css styles stylesheet calc react-native
有一个灰色方块，
用于放置 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
希望这对你有帮助。
| 归档时间： |
|
| 查看次数： |
5015 次 |
| 最近记录： |