Technik

React Native Native Base - Erste Screens

Gaweng Tan

20. Feb. 2021 • 4 min read

Der zweite Teil der React Native Reihe. Nachdem im ersten Teil über die Einrichtung geschrieben wurde, soll es heute um die ersten Screens gehen. Klassisch wird hier beschrieben wie man dies mit den react-native-Mitteln hinbekommt. Da man jedoch meist im Laufe der Zeit ein UI Component Kit verwendet. Daher möchte ich hier direkt damit einsteigen.

Edit: Alle in dieser Reihe beschriebenen Inhalte finden sich in meinem GitHub-Repo wieder und können dort direkt geklont werden.

Native Base

Wie schon oben beschrieben bieten sich UI Component Kits dafür an, da man nicht alles komplett neu erfinden und neu erstellen muss. Eins der bekanntesten Kits ist etwa Native Base. Die Dokumentation zu den einzelnen Elementen findet sich hier.

Ich möchte hier vorallem auf die Features eingehen, die am Anfang hilfreich sein können, sowie einen kleinen Überblick geben, über die Komponenten die meistens benötigt werden.

Installation

Zunächst müssen wir uns die Installation von Native Base. Dies kann man über npm mit folgendem Befehl erzielen:

npm i native-base

Sollte eine react-native Version älter 0.60 muss das Paket noch gelinkt werden, bei neueren Versionen erfolgt dies automatisch. Dies erzielt ihr mit dem Kommando:

npx react-native link

Screenaufbau

Native Base 3-gliedert die Bereiche. Es finden sich Header, Content und Footer. Diese finden sich nicht nur in dem Screenaufbau sondern finden sich durch alle Komponenten wieder, wie etwa bei den Cards. Neben dieser vertikalen Drei-Teilung findet sich auch eine horizontale Drei-Teilung immer wieder in Left, Body und Right.

Prinzipiell ist es eig nur das was man wissen muss, daraus wird dann ein XML erstellt und man hat quasi seinen ersten Screen.

<Container>
    <Header>
      <Left>
        <Text>links</Text>
      </Left>
      <Body>
        <Title>Header</Title>
      </Body>
      <Right>
        <Text>rechts</Text>
      </Right>
    </Header>
    <Content>
      <Text>
        Erster Screen
      </Text>
    </Content>
    <Footer>
      <Text>Footer</Text>
    </Footer>
</Container>

Komponenten

So nun möchte ich mal auf die wichtigsten Komponenten eingehen, die man quasi immer braucht.

Card

Zunächst möchte ich auf Cards eingehen. Diese eignen sich um Text, Bilder oder Ähnliches strukturiert in einer Karte darzustellen. Diese kann mit dem Keyword transparent auch unsichtbar sein.

In diesen einzelnen Cards werden dann CardItems erstellt, der den Inhalt der Karte trägt. Diese sind eben wie zuvor schon erwähnt 3-gliedrig aufgebaut. button und bordered sind hier Keywords, die angewendet werden können.

Dies kann beispielsweise so aussehen:

<Card>
    <CardItem header>
      <Text>Header</Text>
    </CardItem>
    <CardItem>
      <Body>
        <Text>
          Beispieltext
        </Text>
      </Body>
    </CardItem>
    <CardItem footer>
      <Text>Footer</Text>
    </CardItem>
 </Card>

Button

Buttons sind wohl die größte Schwäche bei Native Base. Hier gibt es zwar vordefinierte Button die man nutzen kann. Jedoch ist es hier nicht möglich ein Style-Attribut anzugeben. Daher bleiben nur die Anpassung über die Keywords block, bordered, full, large, rounded, small sowie die Anpassung der Farben analog zu den Bootstrap Standard-Farben. Benötigt man jedoch wirklich custom-Buttons muss man sich diese nativ über React-Mittel lösen.

Ein Button sieht dann wie folgt aus:

<Button bordered dark>
    <Text>Button</Text>
</Button>

Form und Input

Neben Buttons sind Eingabefelder noch das häufigste was benötigt wird. Diese Inputs können auch einzeln hinzugefügt werden. Es bietet sich jedoch an diese in ein Form zu packen, da man hierüber die Eigenschaften aller darunter liegenden Felder anpassen kann. Es gibt dann diverse Möglichkeiten diese Textfelder anzupassen, sollen die Labels als Platzhalter genutzt werden, separat angezeigt, im Rahmen integriert oder oder oder. Das gleicht gilt auch die die Inputs selbst, sollen die umrahmt sein oder anders erkennbar gemacht werden. Hier bietet Native Base schon einige Möglichkeiten an diese zu gestalten.

Ein Beispiel sähe dann so aus:

<Form>
    <Item inlineLabel>
        <Label>Username</Label>
        <Input />
    </Item>
    <Item inlineLabel last>
        <Label>Password</Label>
        <Input />
    </Item>
</Form>

weitere Komponenten

Das sind auch schon alle Komponenten auf die ich eingehen wollte. Ich wollte hiermit nur einen kleinen Eindruck zu Native Base geben. Alle weiteren Komponenten finden sich in der Native-Base Dokumentation aufgelistet.

Erster Screen

So nachdem wir nun die Basics kennnen, lasst uns den ersten Screen damit zusammenbauen.

import * as React from 'react';
import { Body, Button, Card, CardItem, Container, Content, Footer, FooterTab, Form, Header, Icon, Input, Item, Label, Left, Right, Text, Title } from 'native-base';

export default function App() {
  return (
    <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <Content>
          <Card>
            <CardItem header>
              <Text>Card</Text>
            </CardItem>
            <CardItem>
              <Body>
                <Text>
                  Das ist eine Beispielkarte
                </Text>
              </Body>
            </CardItem>
            <CardItem footer>
              <Text>Footer</Text>
            </CardItem>
          </Card>
          <Form>
            <Item inlineLabel>
                <Label>Username</Label>
                <Input />
            </Item>
            <Item inlineLabel last>
                <Label>Password</Label>
                <Input />
            </Item>
          </Form>
          <Button bordered dark>
            <Text>Button</Text>
          </Button>
        </Content>
        <Footer>
          <FooterTab>
            <Button full>
              <Text>Footer</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>

  );
}

Das Ergebnis sieht dann wie oben aus. Im nächsten Teil schauen wir uns dann die Navigation zwischen verschiedenen Screens an.