Как оценить c () высоту в реагировать на родную для укладки - PullRequest
Новая
       85

Как оценить c () высоту в реагировать на родную для укладки

0 голосов
/ 18 марта 2020

Есть серый квадрат, который помещает 4 маленьких квадрата.
Есть черный квадрат, который будет иметь 4 маленьких квадрата в центре каждой стороны черного квадрата.
Для нормальной сети я могу сделать это: вычисление ширины
Но как мне сделать это в реагировать на родной, который Cal c (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
}

Ответы [ 2 ]

1 голос
/ 18 марта 2020

Вы можете получить размер экрана, используя, 

import {Dimensions} from 'react-native';

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

Затем вы можете сделать свои расчеты, как показано ниже, 

width: screenWidth - 20

Надеюсь, это поможет вам.

0 голосов
/ 18 марта 2020

useWindowDimensions автоматически обновляет значения width и height при изменении размера экрана . Вы можете получить ширину и высоту окна вашего приложения следующим образом: 

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 = веб & iframeId = ufwds87fh5 & supportedPlatforms = ios, андроид & имя = useWindowDimensions & описание = Пример% 20usage & waitForData = истина * +1013 *

...