1
00:00:02,150 --> 00:00:09,140
Beginnen wir also mit der Implementierung der Authentifizierung. Ein sehr wichtiger Schritt dazu ist, dass wir einen

2
00:00:09,140 --> 00:00:16,370
neuen Bildschirm hinzufügen, den Authentifizierungsbildschirm, auf dem ein Anmelde- oder Anmeldeformular angezeigt werden soll, mit dem sich der

3
00:00:16,370 --> 00:00:19,910
Benutzer anmelden oder anmelden kann Hier im Authentifizierungsbildschirm

4
00:00:20,130 --> 00:00:24,080
importiere ich React from React und importiere auch einige Dinge

5
00:00:24,260 --> 00:00:31,070
aus React Native, da ich von dort aus React Native die Bildlaufansicht haben möchte, weil wir

6
00:00:31,070 --> 00:00:36,740
ein Formular erstellen und ich möchte Stellen Sie sicher, dass Benutzer aller Gerätegrößen

7
00:00:36,740 --> 00:00:38,420
damit interagieren können.

8
00:00:38,480 --> 00:00:42,290
Ich werde hier ein Stylesheet hinzufügen und das sollte es jetzt sein, wir

9
00:00:42,290 --> 00:00:44,690
können immer mehr hinzufügen, wenn wir mehr brauchen.

10
00:00:44,960 --> 00:00:50,990
Wir können auch bereits eine Ansicht und die Tastatur einschließen, um eine Ansicht zu vermeiden. Ich denke, um sicherzustellen,

11
00:00:51,050 --> 00:00:52,970
dass alle Eingaben immer erreichbar sind.

12
00:00:52,970 --> 00:00:58,160
Wenn wir jetzt von Eingaben sprechen, werden wir natürlich ein Formular hinzufügen, und deshalb werde ich die Eingabekomponente

13
00:00:58,160 --> 00:01:02,630
wiederverwenden, die wir im Formularabschnitt erstellt haben, den ich im Ordner der Komponenten-Benutzeroberfläche finden kann.

14
00:01:02,720 --> 00:01:07,670
Sehen Sie sich also diesen Abschnitt an, um zu erfahren, was diese Komponente tut und wie

15
00:01:07,670 --> 00:01:09,620
wir ein Formular damit verwalten können.

16
00:01:09,620 --> 00:01:17,650
Damit können wir hier die Auth-Screen-Komponente erstellen, die Requisiten empfängt, und wir können dieses

17
00:01:17,650 --> 00:01:22,140
Styles-Objekt auch mit dem Stylesheet und der

18
00:01:22,150 --> 00:01:27,510
dortigen Create-Methode erstellen und natürlich den Auth-Screen wie folgt exportieren.

19
00:01:27,540 --> 00:01:33,150
Nun stellt sich natürlich auch die Frage, wie wir diesen Authentifizierungsbildschirm präsentieren. Wie stellen wir sicher, dass dies angezeigt wird,

20
00:01:33,150 --> 00:01:35,520
wenn wir nicht angemeldet sind?

21
00:01:35,520 --> 00:01:40,620
Das ist etwas, das wir in diesem Modul verfeinern werden, aber um zu beginnen, können

22
00:01:40,620 --> 00:01:46,200
wir zum Navigator gehen und sicherstellen, dass beim Start der App dieser Authentifizierungsbildschirm angezeigt wird, und dafür

23
00:01:46,200 --> 00:01:51,930
können wir einen speziellen neuen Navigator verwenden, den wir nicht haben verwendet, bevor es speziell für diesen

24
00:01:51,930 --> 00:01:56,950
Anwendungsfall entwickelt wurde, könnte man fast sagen, dass die Funktion zum Erstellen eines Switch-Navigators, die

25
00:01:56,970 --> 00:02:02,550
uns dort hilft, einen solchen Switch-Navigator erstellt. Das Besondere an diesem Navigator ist, dass immer genau

26
00:02:02,550 --> 00:02:08,160
ein Bildschirm angezeigt wird und Sie nicht zu einem anderen Bildschirm zurückkehren können, wenn Sie dann zu einem anderen navigieren.

27
00:02:08,160 --> 00:02:13,710
Ein Zurück ist also ausdrücklich nicht erlaubt, was genau das ist, was wir wollen, da Sie nicht in

28
00:02:13,890 --> 00:02:18,040
der Lage sein sollten, zum Anmeldebildschirm zurückzukehren, wenn Sie sich nur angemeldet haben.

29
00:02:18,090 --> 00:02:24,750
Deshalb werde ich hier am Ende der Datei einen neuen Navigator erstellen, vielleicht meinen Hauptnavigator. Der Name

30
00:02:24,750 --> 00:02:31,770
liegt natürlich ganz bei Ihnen, mit create switch navigator, und genau wie zuvor nimmt dieser Navigator ein Argument,

31
00:02:31,920 --> 00:02:38,670
das wir konfigurieren Es ist also ein Objekt, in dem wir es konfigurieren und dort möchte ich

32
00:02:38,880 --> 00:02:46,260
meinen Authentifizierungsbildschirm und natürlich auch meinen Shop-Stack danach binden. Um einen schönen Header zu haben, werde

33
00:02:46,260 --> 00:02:55,560
ich hier auch meinen Auth-Navigator erstellen, der ein Stack-Navigator ist, der mit Create-Stack-Navigator erstellt wurde, und dort werde ich nur

34
00:02:55,560 --> 00:03:00,430
den Auth-Bildschirm zuordnen, an dem ich gerade angefangen habe, und dafür

35
00:03:00,450 --> 00:03:09,210
natürlich wir müssen es importieren, also in diesem ShopNavigator. In js-Datei können wir den Authentifizierungsbildschirm vom Benutzerauthentifizierungsbildschirm wie folgt importieren.

36
00:03:09,210 --> 00:03:10,060
Wenn

37
00:03:10,180 --> 00:03:16,880
dieser Import hinzugefügt wird, ordnen wir dies hier der Authentifizierung im Authentifizierungsnavigator zu, und der Authentifizierungsnavigator wird

38
00:03:16,880 --> 00:03:23,640
dann der Authentifizierung hier im Switch-Navigator und zugeordnet Der Shop ist natürlich dem Shop-Navigator zugeordnet und jetzt

39
00:03:23,640 --> 00:03:28,770
ist es der Hauptnavigator, den wir mit dem App-Container zum Erstellen umschließen. Wenn

40
00:03:28,770 --> 00:03:34,110
wir diesen speichern, wird der Authentifizierungsbildschirm als der erste Bildschirm gerendert, der derzeit

41
00:03:34,140 --> 00:03:35,820
keinen gültigen Bildschirm wiedergibt

42
00:03:36,060 --> 00:03:43,980
jsx, also bekommen wir eine Fehlermeldung, aber wir können natürlich daran arbeiten, da das Ziel jetzt darin besteht, diesen Authentifizierungsbildschirm

43
00:03:43,980 --> 00:03:53,880
zu rendern, auf dem wir uns anmelden und unser Ding machen können. Also hier möchte ich diese Eingaben präsentieren und ich werde tatsächlich auch

44
00:03:53,880 --> 00:04:02,750
die Kartenkomponente von der Komponenten-UI-Karte importieren, damit diese schöne Karte hier aussieht und meine Eingaben dort sind, und natürlich ist dies völlig

45
00:04:02,750 --> 00:04:07,400
optional, aber hier werde ich hinzufügen Hier füge ich die

46
00:04:07,400 --> 00:04:14,030
Karte hinzu und in der Karte können wir die Bildlaufansicht hinzufügen, damit wir innerhalb dieser Karte scrollen

47
00:04:14,030 --> 00:04:19,100
können. Natürlich können Sie auch die Bildlaufansicht um die Karte herum hinzufügen, damit

48
00:04:19,100 --> 00:04:27,650
Sie auf dem Gesamtbildschirm scrollen können Bildschirm, aber ich mache es so, füge hier auch meinen eigenen Stil zu der Karte

49
00:04:27,650 --> 00:04:36,540
hinzu, die ich vielleicht als Auth-Container bezeichne. Der Name liegt ganz bei dir und ich werde auch all das hier als Umhüllung

50
00:04:36,540 --> 00:04:46,880
betrachten Ansicht, wo ich einen Stil hinzufügen werde, den ich Bildschirm benennen werde. Eigentlich können wir hier bereits die Tastatur verwenden, um die Sicht zu vermeiden, denke ich, mit

51
00:04:46,940 --> 00:04:56,730
einem Verhalten des Auffüllens und dann dieser vertikale Versatz der Tastatur, sagen wir 50. In dieser Bildlaufansicht, die wir auf unserer Karte

52
00:04:56,730 --> 00:05:04,720
haben, können wir nun die Eingaben hinzufügen, die benutzerdefinierten Eingaben, die wir zuvor

53
00:05:04,720 --> 00:05:11,590
im Kurs erstellt haben. Zum Beispiel hier eine Eingabe mit der ID-E-Mail

54
00:05:11,590 --> 00:05:19,780
und einem E-Mail-Label, da ich dort die Benutzer-E-Mail-Adresse und damit den Tastaturtyp der E-Mail-Adresse abrufen möchte, der sowohl unter iOS

55
00:05:19,810 --> 00:05:22,750
als auch unter Android unterstützt wird.

56
00:05:22,750 --> 00:05:28,980
Es sollte auch erforderlich sein und ich möchte den E-Mail-Validator verwenden. Dies sind zwei der

57
00:05:28,990 --> 00:05:36,540
Validierungsfunktionen, die ich zuvor in diesem Kurs in die Eingabe eingebaut habe. Auch die automatische Großschreibung sollte deaktiviert

58
00:05:36,540 --> 00:05:42,630
sein, damit ich sie auf keine setze, da sie in der aktiviert ist Die

59
00:05:42,630 --> 00:05:52,190
E-Mail-Adresse ist wirklich nicht hilfreich und die Fehlermeldung, die ich anzeigen möchte, wenn etwas nicht stimmt, lautet: Geben Sie bitte eine gültige E-Mail-Adresse ein.

60
00:05:53,210 --> 00:05:58,670
Wenn sich der Wert ändert, also bei einer Wertänderung, möchten wir etwas tun, aber im Moment

61
00:05:58,670 --> 00:06:04,790
werde ich hier nichts tun, sondern nur eine leere Funktion bereitstellen, damit wir keinen Fehler und den Anfangswert

62
00:06:04,790 --> 00:06:08,260
erhalten, den ich anzeigen möchte Hier ist das am

63
00:06:08,270 --> 00:06:12,530
Ende nur eine leere Zeichenfolge, da ich keinen anderen Anfangswert angeben möchte.

64
00:06:12,530 --> 00:06:17,420
Jetzt ist es natürlich nicht die einzige Eingabe, daher wiederhole ich dies, da

65
00:06:17,900 --> 00:06:26,810
ich hier auch eine Passworteingabe mit Kennwortbezeichnung benötige und der Tastaturtyp hier standardmäßig sein sollte, da ich das normale Textschlüsselwort haben möchte, aber möchte

66
00:06:26,810 --> 00:06:27,500
Verdecken

67
00:06:27,500 --> 00:06:31,490
Sie die Eingabe, damit wir sie nicht sehen können. Dies

68
00:06:31,490 --> 00:06:34,630
kann durch Hinzufügen einer sicheren Texteingabe hier erfolgen.

69
00:06:34,640 --> 00:06:38,250
Dies ist natürlich keine Requisite, die von meiner benutzerdefinierten Komponente

70
00:06:38,330 --> 00:06:44,000
unterstützt wird. Beachten Sie jedoch, dass wir in dieser Komponente alle Requisiten an die integrierte Texteingabe

71
00:06:44,000 --> 00:06:48,710
weiterleiten und die integrierte Texteingabe diese sichere Texteingabeeigenschaft hier unterstützt. Deshalb habe ich

72
00:06:48,710 --> 00:06:51,050
kann dies einstellen. Hier sollte die

73
00:06:51,100 --> 00:06:55,370
Validierung auch nicht prüfen, ob es sich um eine E-Mail-Adresse handelt, sondern

74
00:06:55,370 --> 00:07:02,450
sicherstellen, dass wir eine Mindestlänge von beispielsweise fünf Zeichen haben. Die automatische Großschreibung kann auch hier deaktiviert werden. Eine Fehlermeldung

75
00:07:02,450 --> 00:07:08,660
wäre, bitte geben Sie ein gültiges Passwort ein und damit habe ich gerade gesehen, dass ich hier natürlich einen

76
00:07:08,660 --> 00:07:14,510
Tippfehler habe, das sollte E-Mail-Adresse sein, hier Passwort und ich werde dies hier belassen wie es ist.

77
00:07:17,440 --> 00:07:19,650
Um dies jetzt einreichen zu

78
00:07:19,660 --> 00:07:29,020
können, benötige ich auch eine Schaltfläche. Daher importiere ich hier eine Schaltfläche aus React Native und füge zwei Schaltflächen tatsächlich in

79
00:07:29,020 --> 00:07:29,790
die

80
00:07:31,000 --> 00:07:38,370
Karte und damit auch in die Bildlaufansicht ein. Die erste Schaltfläche hat den Titel "Anmelden".

81
00:07:38,370 --> 00:07:44,940
Nehmen wir an, wir ändern diesen entweder in "Anmelden" oder "Anmelden", je nachdem, in welchem

82
00:07:44,940 --> 00:07:52,570
Modus wir uns befinden und die Farbe importiert oder mithilfe der Farbkonstante hinzugefügt wird, die Sie verwenden sollten

83
00:07:52,670 --> 00:08:01,190
importieren und auf diesen Farben konstant werde ich Farben verwenden. primär und onPress können im Moment einfach auf eine leere Funktion zeigen

84
00:08:01,190 --> 00:08:06,320
und ich werde dies wiederholen, weil ich eine zweite Schaltfläche haben möchte, auf der

85
00:08:06,320 --> 00:08:13,550
ich Schalter zum Anmelden sage und natürlich auch später Schalter zum Anmelden sagen, wenn wir angemeldet sind up-Modus und dort

86
00:08:13,550 --> 00:08:18,720
können wir vielleicht unsere Akzentfarbe verwenden. Wenn wir das jetzt speichern, sollten wir einen einfachen

87
00:08:18,720 --> 00:08:21,870
Anmeldebildschirm haben, hier sieht es nicht so aus, wie es aussehen

88
00:08:21,930 --> 00:08:23,580
sollte, aber wir haben unsere

89
00:08:23,970 --> 00:08:26,970
Eingaben hier, wir haben diese beiden Schaltflächen, auch auf Android, sobald

90
00:08:26,970 --> 00:08:28,040
dies fertig ist,

91
00:08:28,180 --> 00:08:31,360
hier wir gehen und jetzt möchte ich das natürlich angemessen stylen.

92
00:08:31,380 --> 00:08:33,570
Gehen wir also zum Stylesheet

93
00:08:33,570 --> 00:08:40,550
und beachten Sie, dass mir am Ende zwei Stile zugewiesen sind - Bildschirm und Authentifizierungscontainer. Hier in den Stilen, die

94
00:08:40,550 --> 00:08:43,920
ich sowohl Bildschirm- als auch Authentifizierungscontainer hinzufügen möchte, sind

95
00:08:43,920 --> 00:08:50,390
dies die beiden Stile, mit denen ich arbeiten möchte. Jetzt für den Bildschirm werde ich Flex auf

96
00:08:50,390 --> 00:08:57,050
eins setzen und dann meinen Inhalt in der Mitte ausrichten und die Elemente in der Mitte so ausrichten,

97
00:08:57,110 --> 00:08:58,730
dass sie sowohl auf

98
00:08:59,120 --> 00:09:04,090
der vertikalen als auch auf der horizontalen Achse zentriert sind. Auf dem Authentifizierungscontainer möchte

99
00:09:04,100 --> 00:09:10,100
ich eine Breite festlegen von sagen wir 80%, um nicht die volle verfügbare Breite und eine

100
00:09:10,100 --> 00:09:22,710
maximale Breite von tatsächlich 400 Pixel zu nehmen, falls 80% mehr als das wären, beschränken wir uns auf 400 Pixel und vielleicht eine Höhe von sagen wir 50%, aber eine maximale Höhe von auch 400.

101
00:09:22,800 --> 00:09:24,150
Mal sehen, wie das aussieht. Wenn

102
00:09:24,150 --> 00:09:25,950
wir das speichern, bekomme

103
00:09:26,000 --> 00:09:27,230
ich das hier.

104
00:09:27,230 --> 00:09:32,960
Jetzt kann ich dort hinein scrollen, weil ich eine solche Bildlaufansicht eingerichtet habe und das eigentlich nicht das Verhalten ist,

105
00:09:32,960 --> 00:09:33,910
das ich will.

106
00:09:34,160 --> 00:09:35,570
Ich werde hier keine

107
00:09:35,570 --> 00:09:39,620
Höhe festlegen, sondern nur eine maximale Höhe hinzufügen, damit diese auf eine

108
00:09:39,620 --> 00:09:44,500
bestimmte Höhe begrenzt wird. Standardmäßig wird jedoch nur die erforderliche Höhe benötigt, und daher füge

109
00:09:44,540 --> 00:09:49,820
ich stattdessen eine Polsterung hinzu, damit wir eine haben Platz um die Eingänge und es sitzt nicht

110
00:09:49,820 --> 00:09:50,440
am

111
00:09:50,450 --> 00:09:56,420
Rand der Karte, also sieht das viel besser aus und mal sehen, wie das auf Android aussieht, ja sieht

112
00:09:56,440 --> 00:09:57,870
im Allgemeinen in Ordnung aus.

113
00:09:58,690 --> 00:10:00,730
Wenn ich dort tippe, wird auch

114
00:10:00,730 --> 00:10:06,860
ein Bildlauf durchgeführt, sodass die Tastatur, die die Ansicht vermeidet, ihre Aufgabe erfüllt, aber natürlich wird hier immer noch ein

115
00:10:07,040 --> 00:10:11,190
Fehler angezeigt, der bei einer Eingabeänderung einen Fehler verursacht, da ja, ich habe

116
00:10:11,200 --> 00:10:15,070
hier eine Wertänderung hinzugefügt, das sollte sein bei Eingangsänderung, nicht bei Wertänderung.

117
00:10:15,070 --> 00:10:18,370
Das ist also eine kleine Lösung, aber wir gehen in die richtige Richtung.

118
00:10:18,430 --> 00:10:20,740
Jetzt bin ich aber noch nicht fertig, ich

119
00:10:20,740 --> 00:10:24,950
möchte einen Header-Titel haben und wie wäre es mit einer Hintergrundfarbe hier, das wäre wahrscheinlich auch schön.

120
00:10:25,080 --> 00:10:32,680
In Bezug auf den Header-Titel können wir natürlich AuthScreen hinzufügen. navigationOptions und arbeiten vorerst mit einigen statischen

121
00:10:32,680 --> 00:10:39,070
Optionen, da ich hier nur einen Header-Titel hinzufügen und diesen so einstellen möchte,

122
00:10:41,480 --> 00:10:46,700
dass er sich bitte authentifiziert oder nur authentifiziert, so etwas und

123
00:10:46,700 --> 00:10:48,090
für den

124
00:10:48,110 --> 00:10:53,680
Hintergrund können wir hier natürlich unsere Ansicht geben, die alles enthält Hintergrundfarbe,

125
00:10:54,380 --> 00:11:01,280
aber ich möchte Ihnen tatsächlich eine neue Komponente zeigen, die wir bisher noch nicht

126
00:11:01,280 --> 00:11:09,480
verwendet haben. Dazu müssen wir ein brandneues Paket installieren. Dies ist das Expo-Linear-Gradient-Paket, das Sie mit npm

127
00:11:09,480 --> 00:11:12,480
install --save installiert haben expo-linearer Gradient.

128
00:11:12,510 --> 00:11:16,190
Dies ist ein Paket, mit dem wir mühelos

129
00:11:16,200 --> 00:11:18,270
einen linearen Verlauf hinzufügen

130
00:11:18,570 --> 00:11:25,080
können. Auf sehr einfache Weise und nachdem dieser installiert wurde, müssen Sie nur noch

131
00:11:25,800 --> 00:11:32,760
aus dem expo-linearen Verlauf importieren und importieren eine Komponente, die dadurch verfügbar gemacht wird lineare Gradientenkomponente.

132
00:11:32,770 --> 00:11:39,730
Nun, das ist eine Komponente, die Sie auf Ihrer Seite verwenden können, und hier werde ich sie innerhalb

133
00:11:39,730 --> 00:11:47,770
der Tastatur verwenden, um eine Ansicht und einen linearen Verlauf wie diesen zu vermeiden und sie hier und da um alle

134
00:11:47,770 --> 00:11:48,600
anderen

135
00:11:49,240 --> 00:11:56,060
Inhalte wie diesen zu wickeln Ich möchte sicherstellen, dass dies einen Farbschlüssel hat, mit dem wir die Farben

136
00:11:56,200 --> 00:12:02,080
zwischen dem Übergang festlegen können, da ein Verlauf einfach ein Verlauf zwischen mehreren Farben ist,

137
00:12:02,080 --> 00:12:08,040
mindestens zwei, aber Sie können mehr hinzufügen und dort können Sie jetzt einfach Farben hinzufügen,

138
00:12:08,230 --> 00:12:16,510
wie z rot oder durch Hinzufügen der Hex-Codes und ich möchte zwischen #ffedff und einem anderen Hex-Code, # ffe3ff, wechseln und natürlich

139
00:12:16,510 --> 00:12:19,020
können Sie hier mit verschiedenen Farben experimentieren.

140
00:12:19,030 --> 00:12:26,860
Jetzt müssen wir hier auch einen Stil hinzufügen, und ich werde diesen Stilverlauf benennen, den wir jetzt hier unten hinzufügen können.

141
00:12:28,330 --> 00:12:36,040
Dieser Verlauf hat eine Breite von 100% und eine Höhe von 100%, also nimmt er die gesamte Breite und Höhe an

142
00:12:36,040 --> 00:12:40,560
kann bekommen, so sieht es also aus, aber jetzt haben wir ein

143
00:12:40,560 --> 00:12:41,890
Problem, natürlich ist

144
00:12:41,940 --> 00:12:46,300
unser Inhalt nicht mehr zentriert. Um sicherzustellen, dass dies

145
00:12:46,440 --> 00:12:52,410
der Fall ist, müssen wir jetzt Begründungsinhalte hinzufügen und Elemente erneut ausrichten. Daher können

146
00:12:52,410 --> 00:12:53,010
wir

147
00:12:53,010 --> 00:12:55,880
dies hier auf dem umgebenden Bildschirm beseitigen.

148
00:12:55,960 --> 00:12:57,490
Jetzt sehen wir genauso aus wie

149
00:12:57,820 --> 00:13:01,930
zuvor, natürlich können wir dies auch erreichen, indem wir nicht Breite und Höhe einstellen, sondern nur eine biegen.

150
00:13:02,200 --> 00:13:07,210
Jetzt mit diesem Setup hier und es ist wichtig, dass der Bildschirm nicht versucht

151
00:13:07,210 --> 00:13:08,610
zu zentrieren, da

152
00:13:08,620 --> 00:13:15,510
sonst der Farbverlauf zentriert wird, aber mit diesem Setup haben wir jetzt diesen Look mit diesem schönen Farbverlauf und

153
00:13:15,510 --> 00:13:21,960
um unseren Header-Titel hier zu sehen, müssen wir nur Stellen Sie sicher, dass wir im Navigations-Setup im Shop-Navigator

154
00:13:21,960 --> 00:13:23,850
unsere Standard-Navigations-Requisiten dem Auth-Navigator zuweisen.

155
00:13:23,970 --> 00:13:29,670
Daher füge ich das zweite Argument hinzu, um einen Stapelnavigator zu erstellen, und die Standardnavigationsoptionen zeigen

156
00:13:29,670 --> 00:13:34,980
nur auf die Standardnavigationsoptionen, mit denen die Kopfzeilenfarbe, die Kopfzeilen-Titelfarbe usw. festgelegt werden.

157
00:13:39,730 --> 00:13:45,190
Stellen Sie natürlich sicher, dass Sie hier in den Navigationsoptionen des Authentifizierungsbildschirms im Authentifizierungsbildschirm keinen Tippfehler haben,

158
00:13:45,190 --> 00:13:46,480
wie ich es tue.

159
00:13:46,480 --> 00:13:50,950
Wenn dies behoben ist, ist dies das Setup, das wir hier haben. Natürlich

160
00:13:50,950 --> 00:13:54,830
können Sie mit den Farben experimentieren und verschiedene Farben verwenden, wenn

161
00:13:55,060 --> 00:14:01,480
Sie dies bevorzugen. Ich bin damit zufrieden und jetzt möchte ich nur noch mein Styling korrigieren Für die Schaltflächen

162
00:14:01,480 --> 00:14:09,650
wäre ein gewisser Abstand um sie herum schön, und das kann leicht hinzugefügt werden, indem die Schaltflächen hier in Ansichten eingeschlossen werden, eigentlich beide Schaltflächen.

163
00:14:12,500 --> 00:14:22,640
Also mache ich das hier und gebe jetzt jeder Ansicht hier einen Stil, vielleicht Stile-Schaltflächencontainer, mache dies in der ersten Ansicht und in der zweiten Ansicht und

164
00:14:22,760 --> 00:14:24,980
jetzt können wir diesem Schaltflächencontainer dort

165
00:14:24,980 --> 00:14:29,500
unten im Stylesheet und hier ein Styling geben Sie können beispielsweise

166
00:14:29,750 --> 00:14:35,930
einen Rand oben auf 10 setzen, um sicherzustellen, dass jeder Knopf einen kleinen Rand oben hat, damit

167
00:14:35,930 --> 00:14:40,760
die Knöpfe nicht direkt nebeneinander sitzen, was meiner Meinung nach unseren Knöpfen wirklich

168
00:14:40,790 --> 00:14:41,900
helfen würde.

169
00:14:41,900 --> 00:14:43,350
Das sieht also unter iOS

170
00:14:43,340 --> 00:14:45,280
gut aus. Schauen wir uns das auch unter Android

171
00:14:45,290 --> 00:14:46,910
an. Ja, das sieht nicht schlecht aus.

172
00:14:47,810 --> 00:14:53,090
Damit haben wir diese Grundeinstellung. Stellen wir nun sicher, dass dies auch etwas Nützliches bewirkt und dass

173
00:14:53,090 --> 00:14:55,160
wir tatsächlich versuchen, uns damit anzumelden.