Easy React Natives Layout & Grid für die Dummen

Blog

Easy React Natives Layout & Grid für die Dummen

Easy React Natives Layout & Grid für die Dummen

React Native Easy Grid .Dies ist NICHT-NUR-ANOTHER-GRID-LAYOUT-Bibliothek! Wir versuchen, Flexbox mit einem einfacheren Ansatz zu vereinfachen.

Installation

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

Verwendungszweck

Fügen Sie die Komponenten hinzu

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

1. Zwei Spalten (50% und 50%)

Spalte-50-50
Hinweis: Wenn Sie die Größeneigenschaft nicht zuweisen, wird standardmäßig die gleiche Breite (oder Höhe) wie bei ihren Geschwistern verwendet

2. Zwei Reihen

Reihe-50-50

Klassenformular nicht gefunden

3. Zwei Reihen (75% und 25%)

Das ist genau das gleiche wie

Reihe-75-25

Das gleiche Konzept gilt für |_+_|

4. Drei Spalten (jeweils 33,33 %)

Spalte-33-33-33

5. Drei Reihen (50%, 25% und 25%)

Reihe-50-25-25

6. Verschachteltes Layout oder Raster

| 1 | 2 |
| 3 |

Komplex

Quellcode des Android-Rechners

7. Kombination aus fester Breite und flüssiger Breite

1 2 3

col-fluid-fixiert

8. Kombination aus fester Höhe und Flüssigkeitshöhe

Fixed width Fluid width

Glaubst du, es könnte einfacher sein? Dieses Repo ist Teil unseres größeren Projekts namens NativeBase.io . Überprüfen Sie das!

Wichtiger Hinweis zur Verwendung mit |_+_|

Hinweis: Wenn Sie |_+_| . verwenden innerhalb eines |_+_| wäre die Höhe der Komponente je nach Inhalt flexibel, obwohl Sie immer die |_+_| . anwenden können Styling.

Download-Details:

Autor: GeekyAmeisen

Winkelversion prüfen cli

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

#reagieren-native #programmierung