1 00:00:02,230 --> 00:00:06,820 Und dafür ist es sinnvoll, hier in der App zu starten. js Datei. 2 00:00:06,820 --> 00:00:10,370 Lassen Sie nun das Terminal hier offen und der Prozess 3 00:00:10,390 --> 00:00:15,280 läuft natürlich, sodass Änderungen in Ihrem Code automatisch in die Emulatoren übernommen werden. Lassen Sie 4 00:00:15,340 --> 00:00:18,420 uns nun sehen, wie wir damit beginnen können. 5 00:00:18,460 --> 00:00:23,590 Ich habe bereits im ersten Kursmodul erwähnt, dass es bei React Native um diese 6 00:00:23,590 --> 00:00:28,870 integrierten Kernkomponenten wie Text und Ansicht geht. Eine Ansicht wäre Ihr Div von der Webentwicklung, 7 00:00:28,870 --> 00:00:32,920 falls Sie ein Webentwickler sind, was Sie wahrscheinlich sind, wenn Sie React kennen. 8 00:00:32,920 --> 00:00:34,790 Es ist also eine großartige Containerkomponente. 9 00:00:34,810 --> 00:00:40,050 Sie können sie so gestalten, wie Sie sie hier sehen, und Sie können andere Inhalte damit umschließen. 10 00:00:40,240 --> 00:00:44,930 Ein Text hingegen ist eine Kernkomponente für die Ausgabe von 11 00:00:44,930 --> 00:00:49,870 Text. Das ist das Ziel, nicht ein Bild auszugeben, sondern Text auszugeben. 12 00:00:49,870 --> 00:00:55,540 Was Sie in React Native nicht tun können und das ist das erste Wichtige, Sie können beispielsweise keinen 13 00:00:55,540 --> 00:00:57,810 Text zwischen einer solchen Ansicht ausgeben. 14 00:00:57,910 --> 00:01:04,120 Wenn wir versuchen würden, dies ohne diesen Text-Wrapper zu speichern, wird eine Fehlermeldung angezeigt. Das ist übrigens ein Bildschirm, den Sie von 15 00:01:04,120 --> 00:01:09,880 Zeit zu Zeit sehen, wenn Sie mit React Native arbeiten. Er gibt Ihnen einen Fehler 16 00:01:09,880 --> 00:01:15,910 und erklärt, was schief gelaufen ist. Hier ist zum Beispiel eine ziemlich klare Fehlermeldung, die uns sagt, dass 17 00:01:15,910 --> 00:01:17,800 Textzeichenfolgen innerhalb der Textkomponente gerendert werden müssen, und 18 00:01:17,950 --> 00:01:19,330 warum ist das so wichtig? 19 00:01:19,330 --> 00:01:21,100 Warum betone ich das? 20 00:01:21,220 --> 00:01:24,590 Da dies ein wichtiger Unterschied zur Webentwicklung ist, können Sie 21 00:01:24,610 --> 00:01:27,850 dort überall Text einfügen. In der Webentwicklung könnten 22 00:01:27,970 --> 00:01:35,800 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, 23 00:01:35,800 --> 00:01:41,500 nicht nur, weil wir ein div verwenden, das dort nicht unterstützt wird, sondern natürlich, weil on 24 00:01:41,650 --> 00:01:49,810 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 25 00:01:49,810 --> 00:01:56,530 ist ein entscheidender Unterschied zum Web, in dem Sie Ihren Text überall und in React Native ablegen können Noch wichtiger 26 00:01:56,530 --> 00:02:02,560 ist, dass Sie die richtige integrierte Komponente für die Aufgabe verwenden, die Sie erledigen möchten, und für 27 00:02:02,560 --> 00:02:09,070 das Styling, für die Einrichtung eines Containers, in dem Sie verschiedene Inhalte strukturieren. Dies wäre eine Ansicht, für die 28 00:02:09,070 --> 00:02:15,070 Ausgabe von Text, der ein Text sein könnte. Zum Beispiel für die Ausgabe eines 29 00:02:15,070 --> 00:02:20,460 Bildes haben Sie eine Bildkomponente. So funktioniert React Native und spricht vom 30 00:02:20,860 --> 00:02:28,180 Styling, vom Layout. Die Ansicht hat dies als Hauptaufgabe. Sie dient hauptsächlich dazu, Stile anzuwenden und den 31 00:02:28,450 --> 00:02:31,070 Inhalt, den Sie dort haben, 32 00:02:31,180 --> 00:02:34,050 zu gestalten. Sprechen wir mit dem Layout. 33 00:02:34,360 --> 00:02:39,580 Angenommen, in unserer App möchten wir hier auf diesem Bildschirm zwei Hauptbereiche haben. Oben möchte ich dem Benutzer erlauben, Text 34 00:02:39,580 --> 00:02:45,850 einzugeben, und rechts davon möchte ich eine Schaltfläche haben, um diese Auswahl zu bestätigen. Darunter befindet sich der 35 00:02:45,850 --> 00:02:46,720 erste 36 00:02:46,720 --> 00:02:47,640 Teil, der Eingabebereich, 37 00:02:47,650 --> 00:02:53,110 und darunter befindet sich der zweiter Teil und das ist die Liste der Ziele, die 38 00:02:53,110 --> 00:02:54,530 der Benutzer eingegeben hat. 39 00:02:54,550 --> 00:03:00,640 Also also hier in App. js, wir können mit einer Wrapping-Ansicht beginnen, da Sie 40 00:03:00,640 --> 00:03:06,280 wie in normalem React eine übergeordnete Komponente benötigen und dies normalerweise eine Ansicht in React Native ist, 41 00:03:06,280 --> 00:03:10,590 da dies Ihnen die meisten Layout- und Stiloptionen bietet und sich in dieser 42 00:03:10,780 --> 00:03:17,910 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 43 00:03:17,970 --> 00:03:23,860 Ansicht, um unsere Liste der Ziele zu erhalten, und ich werde diesen Text loswerden, und es ist in 44 00:03:23,860 --> 00:03:31,350 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. 45 00:03:31,380 --> 00:03:38,150 Lassen Sie uns nun übrigens diesen Container dort unten und auch diese Stilzuweisung loswerden und mit all 46 00:03:38,150 --> 00:03:40,230 dem von vorne beginnen. 47 00:03:40,250 --> 00:03:46,100 Im Moment ist es wichtig, dass jede von React Native bereitgestellte Komponente ihren eigenen Job hat. Es 48 00:03:46,100 --> 00:03:51,560 gibt nicht so viele Komponenten, aber die dort vorhandenen haben klar definierte Rollen. Anschließend erstellen Sie 49 00:03:51,560 --> 00:03:56,510 Ihre Benutzeroberfläche, indem Sie diese Komponenten je nach Bedarf ineinander verschachteln Wenn Sie beispielsweise 50 00:03:56,510 --> 00:04:01,550 ein Layout erstellen möchten, beginnen Sie mit dem Verschachteln einiger Ansichten. Sobald Sie sich an 51 00:04:01,910 --> 00:04:07,040 dem Teil befinden, an dem Sie Inhalte ausgeben möchten, fügen Sie Texte usw. hinzu, und 52 00:04:07,250 --> 00:04:14,960 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 53 00:04:14,960 --> 00:04:21,740 Anleitungen, Komponenten und APIs klicken, erhalten Sie einen Überblick über diese Kernbausteine. Sie finden hier die Ansicht, den Text, das Bild, die 54 00:04:21,740 --> 00:04:27,320 Texteingabe, die ich bereits erwähnt habe, und einige andere Kernkomponenten, und Sie werden so ziemlich alle 55 00:04:27,350 --> 00:04:32,720 oder die meisten davon in diesem Kurs sehen, und dies ist eine Ein großartiger Ort, um 56 00:04:32,720 --> 00:04:37,370 tiefer zu tauchen und mehr über sie zu erfahren. Wie Sie bereits sehen können, 57 00:04:37,370 --> 00:04:44,360 gibt es nicht so viele Kernkomponenten, nur etwa 10 Kernkomponenten und, wenn Sie die plattformspezifischen Komponenten dort unten weglassen, die mehr 58 00:04:44,390 --> 00:04:51,110 auf Nischen ausgerichtet sind So funktioniert React Native. Trotzdem können Sie jede gewünschte App erstellen, 59 00:04:51,110 --> 00:04:53,690 wie Sie sehen werden.