Und dafür ist es sinnvoll, hier in der App zu starten. js Datei.
Lassen Sie nun das Terminal hier offen und der Prozess
läuft natürlich, sodass Änderungen in Ihrem Code automatisch in die Emulatoren übernommen werden. Lassen Sie
uns nun sehen, wie wir damit beginnen können.
Ich habe bereits im ersten Kursmodul erwähnt, dass es bei React Native um diese
integrierten Kernkomponenten wie Text und Ansicht geht. Eine Ansicht wäre Ihr Div von der Webentwicklung,
falls Sie ein Webentwickler sind, was Sie wahrscheinlich sind, wenn Sie React kennen.
Es ist also eine großartige Containerkomponente.
Sie können sie so gestalten, wie Sie sie hier sehen, und Sie können andere Inhalte damit umschließen.
Ein Text hingegen ist eine Kernkomponente für die Ausgabe von
Text. Das ist das Ziel, nicht ein Bild auszugeben, sondern Text auszugeben.
Was Sie in React Native nicht tun können und das ist das erste Wichtige, Sie können beispielsweise keinen
Text zwischen einer solchen Ansicht ausgeben.
Wenn wir versuchen würden, dies ohne diesen Text-Wrapper zu speichern, wird eine Fehlermeldung angezeigt. Das ist übrigens ein Bildschirm, den Sie von
Zeit zu Zeit sehen, wenn Sie mit React Native arbeiten. Er gibt Ihnen einen Fehler
und erklärt, was schief gelaufen ist. Hier ist zum Beispiel eine ziemlich klare Fehlermeldung, die uns sagt, dass
Textzeichenfolgen innerhalb der Textkomponente gerendert werden müssen, und
warum ist das so wichtig?
Warum betone ich das?
Da dies ein wichtiger Unterschied zur Webentwicklung ist, können Sie
dort überall Text einfügen. In der Webentwicklung könnten
Sie ein div haben und zwischen den öffnenden und schließenden div-Tags könnten Sie beliebigen Text haben, und dies funktioniert nicht in React Native,
nicht nur, weil wir ein div verwenden, das dort nicht unterstützt wird, sondern natürlich, weil on
React Native, Sie können wirklich nur Text zwischen Text-Tags ausgeben. Sie müssen also die von React Native bereitgestellte Textkomponente verwenden, um Text auszugeben. Dies
ist ein entscheidender Unterschied zum Web, in dem Sie Ihren Text überall und in React Native ablegen können Noch wichtiger
ist, dass Sie die richtige integrierte Komponente für die Aufgabe verwenden, die Sie erledigen möchten, und für
das Styling, für die Einrichtung eines Containers, in dem Sie verschiedene Inhalte strukturieren. Dies wäre eine Ansicht, für die
Ausgabe von Text, der ein Text sein könnte. Zum Beispiel für die Ausgabe eines
Bildes haben Sie eine Bildkomponente. So funktioniert React Native und spricht vom
Styling, vom Layout. Die Ansicht hat dies als Hauptaufgabe. Sie dient hauptsächlich dazu, Stile anzuwenden und den
Inhalt, den Sie dort haben,
zu gestalten. Sprechen wir mit dem Layout.
Angenommen, in unserer App möchten wir hier auf diesem Bildschirm zwei Hauptbereiche haben. Oben möchte ich dem Benutzer erlauben, Text
einzugeben, und rechts davon möchte ich eine Schaltfläche haben, um diese Auswahl zu bestätigen. Darunter befindet sich der
erste
Teil, der Eingabebereich,
und darunter befindet sich der zweiter Teil und das ist die Liste der Ziele, die
der Benutzer eingegeben hat.
Also also hier in App. js, wir können mit einer Wrapping-Ansicht beginnen, da Sie
wie in normalem React eine übergeordnete Komponente benötigen und dies normalerweise eine Ansicht in React Native ist,
da dies Ihnen die meisten Layout- und Stiloptionen bietet und sich in dieser
Ansicht befindet. Wir könnten eine andere Ansicht für den Eingabebereich haben, in der wir dann unsere Eingabe hinzufügen, und darunter eine weitere
Ansicht, um unsere Liste der Ziele zu erhalten, und ich werde diesen Text loswerden, und es ist in
React Native ziemlich normal, dass Sie ziemlich viel haben von Ansichten, die ineinander verschachtelt sind, so dass Sie jedes gewünschte Layout erstellen können.
Lassen Sie uns nun übrigens diesen Container dort unten und auch diese Stilzuweisung loswerden und mit all
dem von vorne beginnen.
Im Moment ist es wichtig, dass jede von React Native bereitgestellte Komponente ihren eigenen Job hat. Es
gibt nicht so viele Komponenten, aber die dort vorhandenen haben klar definierte Rollen. Anschließend erstellen Sie
Ihre Benutzeroberfläche, indem Sie diese Komponenten je nach Bedarf ineinander verschachteln Wenn Sie beispielsweise
ein Layout erstellen möchten, beginnen Sie mit dem Verschachteln einiger Ansichten. Sobald Sie sich an
dem Teil befinden, an dem Sie Inhalte ausgeben möchten, fügen Sie Texte usw. hinzu, und
wir All das werde ich in den nächsten Vorträgen tun. Sie können auch jederzeit zu den offiziellen React Native-Dokumenten gehen. Wenn Sie dort auf
Anleitungen, Komponenten und APIs klicken, erhalten Sie einen Überblick über diese Kernbausteine. Sie finden hier die Ansicht, den Text, das Bild, die
Texteingabe, die ich bereits erwähnt habe, und einige andere Kernkomponenten, und Sie werden so ziemlich alle
oder die meisten davon in diesem Kurs sehen, und dies ist eine Ein großartiger Ort, um
tiefer zu tauchen und mehr über sie zu erfahren. Wie Sie bereits sehen können,
gibt es nicht so viele Kernkomponenten, nur etwa 10 Kernkomponenten und, wenn Sie die plattformspezifischen Komponenten dort unten weglassen, die mehr
auf Nischen ausgerichtet sind So funktioniert React Native. Trotzdem können Sie jede gewünschte App erstellen,
wie Sie sehen werden.