Easy React Native Layout & Grid за тъпите

Блог

Easy React Native Layout & Grid за тъпите

React Native Easy Grid. Това НЕ Е просто-ДРУГА-ДРУГА-РЕШЕТКА-БИБЛИОТЕКА! Опитваме се да опростим flexbox с по -лесен подход.

Инсталация

npm install react-native-easy-grid --save

Употреба

Включете компонентите

import { Col, Row, Grid } from 'react-native-easy-grid';

1. Две колони (50% и 50%)

col-50-50
Забележка: Ако не зададете свойството size, по подразбиране той е с еднаква ширина (или височина) със своите братя и сестри

2. Два реда

ред-50-50

как да видите защитен акаунт в twitter

3. Два реда (75% и 25%)

Това е абсолютно същото като

ред-75-25

Същата концепция се прилага за | _+_ |

4. Три колони (по 33,33% всяка)

col-33-33-33

5. Три реда (50%, 25%и 25%)

ред-50-25-25

6. Вложено оформление или решетка

| 1 | 2 |
| 3 |

комплекс

javascript валидиране на телефонен номер

7. Комбинация от фиксирана ширина и ширина на флуида

1 2 3

коло-течност-фиксирана

8. Комбинация от фиксирана височина и височина на флуида

Fixed width Fluid width

Мислите ли, че нещо по -просто от това? Това репо е част от нашия по -голям проект, наречен NativeBase.io . Проверете това!

Важна забележка относно използването с | _+_ |

Забележка: Ако използвате | _+_ | вътре в | _+_ |, височината на компонента ще бъде гъвкава според съдържанието, въпреки че винаги можете да приложите | _+_ | стайлинг.

Подробности за изтегляне:

Автор: GeekyAnts

реакция-роден-ui-lib

GitHub: https://github.com/GeekyAnts/react-native-easy-grid

#реагиране-родно #програмиране