React Native: Device Независимая сетка квадратов с flexbox

Я хотел бы отображать одну и ту же сетку с квадратами независимо, если у пользователя есть iPad или iPhone, соответственно, квадратные размеры.React Native: Device Независимая сетка квадратов с flexbox

Я не хочу определять устройство и изменять ширину и высоту квадратов на основе размера экрана. Можно ли использовать только возможности css flex для React Native?

Здесь rnplay example

источник

2016-09-16 Ronnie

Ток (0.33.0 на момент написания) flexbox capabilities of React Native (с использованием flexDirection и flex) могут только дать вам даже ширину или высоту, но не как в то же самое время. Почему вы не хотите использовать Dimensions для измерения размера экрана?

источник

2016-09-16 16:30:31 rclai

Dimension является то, что я делаю сейчас, чтобы увеличить площади, но мне казалось, неправильный подход для расчета фиксированных размеров на основе ширины экрана и высоту. – Ronnie

Если вы посмотрите на комментарии, которые я написал в ответ на @ kukkuz, вы можете попробовать с помощью свойства 'flexBasis', которое находится на 0.34.0-rc, но похоже, что вам все равно придется вручную измерьте 33% ширины минус какой-то запас независимо от того, что. В этом случае нет ничего плохого в том, чтобы измерять размеры вручную, и в (в основном родном) мобильном измерении измерений - очень распространенная практика. – rclai

@ Ronnie, не могли бы вы поделиться кодом того, как вы делаете измерения? Может быть, есть более простой способ сделать вычисления. – rclai

Хорошо, есть трюк, который позволяет на самом деле создать сетку квадратов с помощью flexbox - может быть, вы можете принять ее, чтобы React Native.

Пример:

Сначала я создал flexbox с 3 коробки в ряд, который оборачивает на несколько строк:
```
.flexbox { 
    list-style: none; 
    display: flex; 
    flex-wrap: wrap; 
} 
.flexbox > * { 
    margin: 5px; 
    text-align: center; 
    border: 1px solid red; 
    flex-basis: calc(33.33% - 10px); 
} 
```
Примечание flex-basis: calc(33.33% - 10px), что позволяет сохранить 3 коробки в ряд - измените это, чтобы разместить больше ящиков. (10px здесь двойник поля).
И вот трюк, который делает их квадратами - сделать псевдо inline-block элемент, который имеет padding-bottom: 100%. (Если вы обивка/маржу в процентах, то он всегда берется по ширине)
```
.flexbox > *:before { 
    content: ''; 
    padding-bottom: 100%; 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
} 
```

Позвольте мне знать ваше мнение по этому вопросу. Благодаря!

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.flexbox { 
 
    list-style: none; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.flexbox > * { 
 
    margin: 5px; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
    flex-basis: calc(33.33% - 10px); 
 
} 
 
.flexbox > *:before { 
 
    content: ''; 
 
    padding-bottom: 100%; 
 
    height: 100%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<body> 
 
    <div class="flexbox"> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    </div> 
 
</body>

источник

2016-09-16 18:06:34 kukkuz

Похоже, что «flexBasis» был недавно добавлен в React Native, но не документирован. Вы должны попробовать его использовать, однако я не уверен, как эмулировать 'calc (33.33% - 10px)', учитывая, что 'flexBasis' требует числа в качестве опоры. – rclai

Ох получается, что 'flexBasis' находится на 0.34.0-rc. https://github.com/facebook/react-native/releases/tag/v0.34.0-rc.0 – rclai

ну, не знаю много о 'реакции родной' ... надеюсь, этот ответ поможет вам найти способ. ..:) – kukkuz

React Native: Device Независимая сетка квадратов с flexbox

ответ

Смежные вопросы