Beginnen Sie mit React Native Layouts

Dieses Tutorial führt Ihnen an, wie Sie das Layout Ihrer nativen Reaktionsanwendung entwerfen und Layouts implementieren, die häufig in Ihrer Anwendung verwendet werden, einschließlich Stapelung, Gitterlayout und absolutes Layout. Ich gehe davon aus, dass Sie bereits den grundlegenden Stil von React Native -Apps und die Verwendung von CSS kennen, sodass Sie nicht zu viel über das Flatgrid -Element erklären werden.

Sie können es direkt importieren, und wenn Sie Snack verwenden, wird die Expo Sie gefragt, ob Sie ihn installieren möchten. Andernfalls können Sie es mit dem folgenden Befehl installieren:

npm install react-native-super-grid

Importieren Sie die Bibliothek in Ihre Datei und extrahieren Sie verschiedene Komponenten.

import React from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';

import { FlatGrid, SectionGrid } from 'react-native-super-grid';

FlatList verwendet, um eine partitionelle Liste zu rendern; SectionList

Die API basiert auf dem Übergeben von Datenarrays und dem Rendern von Methoden, anstatt alles als JSX -Kinderelement zu betrachten. Dies hilft, den Code zu vereinfachen, da Sie kein Netz schreiben müssen, sondern die Daten einfach einfügen müssen. super-grid

import React from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';
import { FlatGrid } from 'react-native-super-grid';

const styles = StyleSheet.create({
  Item: {
    color: "red"
  },
  Grid: {
    backgroundColor: "grey"
  }
});

export default function JustifyContent() {
    return (
      <flatgrid style="{styles.Grid}" itemdimension="{130}" data="{[1,2,3,4,5,6]}" renderitem="{({" item> (<text style="{styles.Item}">{item}</text>)}
      />
    );
}</flatgrid>

Zusammenfassung

In diesem Tutorial haben Sie gelernt, wie man das Layout von React Native Apps entwirft. Insbesondere haben Sie gelernt, wie man die Flexbox von React Native verwendet, um Elemente zu lokalisieren. Sie haben auch gelernt, wie man native Super -Grid reagiert, was die Implementierung der Netze erleichtert. Sie können den vollständigen Beispielcode und den Expo -Snack mit allen Layouts anzeigen.

Im nächsten Tutorial werden wir alles, was Sie gelernt haben, in die Praxis umsetzen, indem wir gemeinsame UI -Elemente in Ihrer Bewerbung nachdenken: wie Kalender, Liste und Registerkartennavigation.

Dieser Artikel wurde mit Beiträgen von Jacob Jackson aktualisiert. Jacob ist ein Webentwickler, Tech -Autor, Freiberufler und Open -Source -Mitarbeiter.

Das obige ist der detaillierte Inhalt vonBeginnen Sie mit React Native Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!