1 00:00:02,110 --> 00:00:07,000 In einem neuen Ortsbildschirm möchte ich in der Lage sein, einen Ort hinzuzufügen, und dafür 2 00:00:07,030 --> 00:00:12,190 füge ich zunächst die Texteingabekomponente hinzu, die natürlich nichts mit nativen Gerätefunktionen zu tun hat, aber 3 00:00:12,190 --> 00:00:19,330 wir brauchen das einfach auch, weil in Dort können wir jetzt eine solche Texteingabe hinzufügen, mit der der Benutzer den Titel eingeben kann. 4 00:00:19,330 --> 00:00:24,350 Daher füge ich hier auch eine Textkomponente hinzu, in der ich Titel sage, die hier und 5 00:00:24,370 --> 00:00:25,360 insgesamt als 6 00:00:25,360 --> 00:00:32,450 Bezeichnung für diese Texteingabe dienen soll Außerdem möchte ich hier eine Bildlaufansicht, um meinen gesamten Inhalt zu verpacken, da ich nicht weiß, welches 7 00:00:32,520 --> 00:00:37,540 Gerät der Benutzer verwenden wird, aber wir werden mehr als nur einen Titel hinzufügen, wir werden 8 00:00:37,540 --> 00:00:43,120 auch eine Bildauswahl und eine Ortsauswahl hinzufügen Dieses Modul und damit das Scrollen dieser Seite ist wirklich wichtig. 9 00:00:43,180 --> 00:00:48,820 Jetzt haben wir also die Titelbezeichnung und die dazugehörige Texteingabe, die vorerst nichts bewirkt, 10 00:00:48,820 --> 00:00:52,450 dem Benutzer aber bald die Eingabe eines Titels ermöglicht. 11 00:00:52,540 --> 00:00:55,840 Ich möchte auch sicherstellen, dass dieses Formular natürlich eingereicht werden kann. 12 00:00:56,170 --> 00:01:02,500 Daher möchte ich hier auch eine Schaltflächenkomponente hinzufügen. Nach der Texteingabe hier habe ich meine Schaltfläche, auf der ich "Speicherplatz speichern für" 13 00:01:02,500 --> 00:01:10,450 sage Fügen Sie hier beispielsweise eine Farbe hinzu und setzen Sie diese auf Farben. primär und dafür müssen Sie sicherstellen, dass Sie 14 00:01:10,540 --> 00:01:15,730 die Farben hier konstant importieren und onPress wird dieses Formular später 15 00:01:15,820 --> 00:01:19,750 senden, im Moment mache ich hier nichts. 16 00:01:19,750 --> 00:01:25,030 Die Texteingabe kann natürlich auch konfiguriert werden, obwohl die meisten Grundkonfigurationen hier in Ordnung sind. Ich muss den 17 00:01:25,030 --> 00:01:29,920 Tastaturtyp nicht ändern und so weiter, aber ein gewisses Styling wäre nett und das gilt tatsächlich 18 00:01:29,920 --> 00:01:31,360 für die gesamte Seite. 19 00:01:31,360 --> 00:01:37,330 Für diese Ansicht hier möchte ich hier beispielsweise einen Formstil hinzufügen, also eine Stilkennung für das Formular, damit 20 00:01:37,330 --> 00:01:41,140 ich das Gesamtformular formatieren kann. Für den Titel 21 00:01:41,140 --> 00:01:50,980 hier füge ich einen Beschriftungsstil hinzu und für die Texteingabe möchte ich auch meine eigenen Stile hinzufügen und ich werde 22 00:01:51,100 --> 00:01:55,210 hier die Kennungstexteingabe verwenden. Lassen Sie uns zum Stylesheet gehen 23 00:01:55,210 --> 00:02:00,180 und sicherstellen, dass wir hier etwas Styling hinzufügen. Für das Gesamtformular füge ich einen Rand 24 00:02:00,220 --> 00:02:05,350 in alle Richtungen von 30 hinzu, damit er nicht direkt an den Rändern des Bildschirms sitzt. 25 00:02:06,160 --> 00:02:07,480 Für die Beschriftung 26 00:02:07,780 --> 00:02:15,640 möchte ich eine Schriftgröße von beispielsweise 18 festlegen und am unteren Rand von 15 einen Rand hinzufügen, damit zwischen der 27 00:02:15,640 --> 00:02:20,530 Beschriftung und der Texteingabe sowie auf der Texteingabe selbst ein gewisser Abstand 28 00:02:20,860 --> 00:02:27,670 besteht In der Lage, es zu sehen, füge ich hier einen Rand unten hinzu und setze seine 29 00:02:27,670 --> 00:02:36,460 Farbe auf dieses Hellgrau mit diesem Hex-Code von #ccc und einer Randbodenbreite von 1 und habe dann auch einen Rand am unteren 30 00:02:36,490 --> 00:02:43,060 Rand, also am Inhalt Darunter befindet sich der Button von jetzt 15, und was ich hier 31 00:02:43,060 --> 00:02:48,300 auch hinzufügen werde, ist ein bisschen vertikale Polsterung, nur vier und ein bisschen 32 00:02:48,670 --> 00:02:52,100 horizontale Polsterung, nur zwei. Wenn ich das speichere, schauen wir mal. 33 00:02:52,150 --> 00:02:57,310 Wenn ich zum Bildschirm mit den neuen Orten gehe, ist dies das, was ich habe 34 00:02:57,400 --> 00:03:03,360 und das sieht nicht allzu schäbig aus, auch auf Android. Wir können damit arbeiten, und darauf können wir aufbauen. 35 00:03:03,460 --> 00:03:05,970 Jetzt macht diese Eingabe natürlich nichts, ich 36 00:03:05,980 --> 00:03:13,390 möchte natürlich erfassen, was der Benutzer eingegeben hat, und um dies einfach zu halten, werde ich hier keine superkomplexe 37 00:03:13,390 --> 00:03:15,770 Validierung oder ähnliches hinzufügen, sondern 38 00:03:15,790 --> 00:03:22,030 nur den Wert erfassen und das ist es. Sie können natürlich eine Validierung hinzufügen, Sie können 39 00:03:22,330 --> 00:03:23,360 einen Reduzierer 40 00:03:23,370 --> 00:03:28,680 hinzufügen, wie wir es im Benutzereingabemodul getan haben, in dem Sie gelernt haben, wie Sie 41 00:03:28,690 --> 00:03:36,490 komplexere Formulare auf alle Arten verwalten können. Auch hier werde ich dies sehr einfach halten und daher nur importieren den Use State 42 00:03:36,490 --> 00:03:40,660 Hook von React hier, damit ich hier nur meine Werte erfassen kann. 43 00:03:40,660 --> 00:03:49,360 Hier habe ich also meinen Titelwert und setze die Titelwertfunktion und verwende den Verwendungsstatus, um dies mit einer leeren Zeichenfolge zu 44 00:03:49,350 --> 00:03:53,140 initialisieren. Dann füge ich hier eine Funktion hinzu, den 45 00:03:53,230 --> 00:03:59,800 Titeländerungshandler, der den vom Benutzer eingegebenen Text empfängt und wo l Dann setze ich einfach meinen 46 00:03:59,800 --> 00:04:08,750 Titelwert auf diesen Text und hier könnten Sie natürlich eine Validierung hinzufügen, aber um dies einfach zu halten, werde ich es nicht 47 00:04:08,750 --> 00:04:09,470 tun. 48 00:04:09,470 --> 00:04:15,380 Es ist der Titeländerungs-Handler, der jetzt hier bei der Texteingabe an die Stütze zum Ändern des Textes gebunden 49 00:04:15,380 --> 00:04:16,040 werden 50 00:04:16,040 --> 00:04:22,190 sollte. Dort zeige ich also auf den Titeländerungs-Handler und binde den Wert dieser Eingabe natürlich an meinen Titelwert, weil 51 00:04:22,190 --> 00:04:25,070 Dort speichere ich die Benutzereingaben und damit haben wir 52 00:04:25,190 --> 00:04:33,050 hier eine voll funktionsfähige Benutzereingabe, in der ich auch die Werte erfasse. Jetzt können wir den Titel bekommen, 53 00:04:33,050 --> 00:04:35,530 wir haben auch einen 54 00:04:35,570 --> 00:04:37,640 sicheren Platz. 55 00:04:37,640 --> 00:04:40,110 Wann immer wir diese Schaltfläche drücken, möchte 56 00:04:40,190 --> 00:04:46,370 ich sie speichern, damit ich meinen Handler zum Speichern von Orten habe. Dies ist eine Funktion, die ich an 57 00:04:46,370 --> 00:04:47,680 diese Schaltfläche zum 58 00:04:47,720 --> 00:04:54,050 Speichern von Orten binden möchte. Anstatt diese leere anonyme Funktion zu haben, zeige ich hier auf Speichern Platzieren Sie den 59 00:04:54,050 --> 00:04:58,920 Handler auf dieser Schaltfläche zum Speichern von Orten. Dort möchte ich nun sicherstellen, dass dieser 60 00:04:59,030 --> 00:05:01,540 Ort gespeichert wird. Dazu verwende ich erneut Redux. 61 00:05:01,910 --> 00:05:10,880 Also werde ich Redux mit npm install installieren - Save Redux und auch React Redux und ich werde auch Redux Thunk installieren, 62 00:05:10,880 --> 00:05:13,660 damit wir das auch verwenden können. 63 00:05:13,670 --> 00:05:19,170 Im Moment brauche ich es nicht, weil ich nicht mit einem Server spreche, aber später, wenn wir 64 00:05:19,170 --> 00:05:24,230 native Gerätefunktionen hinzufügen, werden Sie sehen, dass wir dort auch einige Funktionen haben, die asynchron sind 65 00:05:24,230 --> 00:05:29,750 und auf deren Fertigstellung wir möglicherweise vorher warten möchten Wir senden tatsächlich eine Aktion aus, bei der 66 00:05:29,750 --> 00:05:34,470 Redux Thunk uns genau helfen kann. Mit diesen drei installierten Paketen können wir nun Redux einrichten.