1
00:00:02,260 --> 00:00:08,000
Jetzt haben wir den Kartenlook, jetzt wollen wir als nächstes die Schaltflächen reparieren und das habe ich dir bereits gezeigt,

2
00:00:08,000 --> 00:00:11,860
also definitiv deine Chance, das Video anzuhalten und es selbst zu machen.

3
00:00:11,870 --> 00:00:16,430
Ich möchte sicherstellen, dass die Schaltflächen die gleiche Größe haben. Sie sollten nicht die gesamte verfügbare

4
00:00:16,760 --> 00:00:22,070
Breite einnehmen, aber sie sollten die gleiche Größe haben, um sicherzustellen, dass der Text dort hineinpasst und dass sie gleich

5
00:00:22,280 --> 00:00:22,990
groß sind.

6
00:00:23,000 --> 00:00:30,020
Also deine Chance, das Video anzuhalten, danach machen wir das zusammen. Warst du erfolgreich?

7
00:00:30,020 --> 00:00:35,480
Stellen wir sicher, dass die Schaltflächen dieselbe Größe haben. Dafür haben Sie auf dem Startbildschirm, auf dem ich die Schaltflächen habe,

8
00:00:35,480 --> 00:00:43,070
erfahren, dass die Lösung darin besteht, die Schaltflächen in eine Ansicht zu verpacken. Sie müssen also Ihre eigene Ansichtskomponente um die Schaltflächen hinzufügen,

9
00:00:43,220 --> 00:00:45,200
und jetzt können Sie

10
00:00:45,200 --> 00:00:52,670
diesen Schaltflächen einen Stil zuweisen. Daher können Sie hier beiden Schaltflächen ein Schaltflächenobjekt in meinem Stilobjekt verwenden. Fügen Sie

11
00:00:52,670 --> 00:00:55,190
also hier und dort eine Schaltfläche

12
00:00:55,370 --> 00:01:02,730
hinzu Geben Sie einfach eine Breite und hier ist eine Breite, die ich wählen werde, sagen wir 80.

13
00:01:02,750 --> 00:01:09,050
Mal sehen, wie das aussieht, wenn ich das speichere, ein bisschen zu klein, wie es scheint, da diese Schaltfläche

14
00:01:09,260 --> 00:01:10,370
einen Zeilenumbruch enthält.

15
00:01:10,370 --> 00:01:16,890
Also lass uns mit 120 gehen, jetzt ist das sicherlich zu viel, also wie

16
00:01:16,920 --> 00:01:22,510
wäre es mit 100 und das sieht für mich ziemlich ordentlich aus.

17
00:01:22,530 --> 00:01:26,790
Jetzt zusätzlich und das war keine Aufgabe für einen Benutzer, keine Sorge,

18
00:01:26,910 --> 00:01:31,840
wenn Sie das nicht getan haben, ich möchte ihre Farben ändern und eine der Farben

19
00:01:31,950 --> 00:01:37,590
sollte unsere Hauptfarbe sein und ich möchte auch einen Akzent setzen, einige Sekundärfarben sozusagen, die wir verwenden können.

20
00:01:40,450 --> 00:01:46,810
Dafür gibt es in der Startbildschirm-Bildschirmkomponente auf der Schaltfläche selbst eine Farbrequisite, mit der Sie die Farbe

21
00:01:46,810 --> 00:01:48,530
steuern können. Für Android

22
00:01:48,550 --> 00:01:54,460
ist dies die Hintergrundfarbe, für iOS die Textfarbe und jetzt das Zurücksetzen Schaltfläche, dort möchte ich

23
00:01:54,780 --> 00:02:00,250
eine Farbe von # 717fc einrichten, das ist eine schöne Farbe, denke ich, und

24
00:02:00,340 --> 00:02:02,170
für die Hauptschaltfläche, die Bestätigungstaste,

25
00:02:02,170 --> 00:02:08,170
verwende ich mein Hauptthema und ich möchte die gleiche Farbe verwenden, die ich in der Kopfzeile

26
00:02:08,170 --> 00:02:09,370
verwende .

27
00:02:09,370 --> 00:02:12,960
Dort habe ich diesen Hex-Code als Hintergrundfarbe verwendet. Ich werde hier

28
00:02:13,030 --> 00:02:19,090
jetzt dieselbe Farbe für diese zweite Schaltfläche verwenden. Damit können wir das speichern und jetzt

29
00:02:19,210 --> 00:02:24,050
haben wir diese beiden Tastenfarben hier, was meiner Meinung nach ganz gut aussieht.

30
00:02:24,070 --> 00:02:30,660
Ein Nachteil dieses Ansatzes oder eine Sache, die wir verbessern können, ist, dass ich diesen Hex-Code hier verwende, ihn in

31
00:02:30,670 --> 00:02:34,080
der Kopfzeile verwende und wahrscheinlich später in der App die

32
00:02:34,090 --> 00:02:37,330
gleiche Farbe auch an anderen Stellen verwenden möchten .

33
00:02:37,330 --> 00:02:41,380
Es wäre also schön, wenn wir dies als eine Art Thema einrichten könnten,

34
00:02:41,380 --> 00:02:48,340
das man sagen könnte, dass wir diese Farben leicht verwenden könnten, ohne Hex-Codes über unsere App zu kopieren, und dass wir die Farbe

35
00:02:48,340 --> 00:02:53,350
auch an einer Stelle ändern könnten, wenn wir jemals wollen Verwenden Sie eine andere Farbe, und wir

36
00:02:53,350 --> 00:02:55,980
müssen dies nicht in Dutzenden von Komponenten tun.

37
00:02:56,080 --> 00:03:01,830
Und dafür werde ich einen Ansatz verwenden, bei dem ich einen neuen Ordner auf der Stammebene hinzufüge und ihn

38
00:03:01,840 --> 00:03:05,440
als Konstanten benenne. Wie immer können Sie diese Ordner beliebig benennen

39
00:03:05,440 --> 00:03:11,640
und dort möchte ich Farben haben. js Datei. Auch dieser Name kann

40
00:03:11,670 --> 00:03:19,020
auch beliebig benannt werden, da diese Datei ein Standard-Javascript-Objekt exportiert, ein Javascript-Objekt exportiert und dort beliebige Schlüssel-Wert-Paare haben kann,

41
00:03:19,050 --> 00:03:26,760
die ich möchte, und ich werde sie festlegen eine Primärfarbe, also nur Primärfarbe als Schlüsselname und dies sollte dieser

42
00:03:26,820 --> 00:03:32,790
Hex-Code sein, den ich gerade kopiert habe, also diese Kopfzeilenfarbe auch akzentuiert oder sekundär, was

43
00:03:32,790 --> 00:03:37,230
auch immer Sie es benennen möchten, ich werde mit Akzentfarbe gehen

44
00:03:37,230 --> 00:03:42,330
und das sollte Sei diese andere Farbe, die ich auf der ersten Schaltfläche

45
00:03:42,330 --> 00:03:47,070
verwendet habe, also diesen Hex-Code hier, ich werde das hier verwenden.

46
00:03:47,070 --> 00:03:52,920
Jetzt werden diese Farben hier definiert und wir können sie jetzt einfach aus dieser Datei importieren. Wenn wir sie

47
00:03:52,920 --> 00:03:58,700
hier ändern, ändern sie sich überall in dieser Anwendung und können daher während der Entwicklung problemlos ausgetauscht werden.

48
00:03:58,740 --> 00:04:07,800
Jetzt können wir auf dem Startbildschirm einfach Farben aus Konstanten / Farben wie diesen importieren. Ich habe hier ein großes C angegeben, um

49
00:04:08,050 --> 00:04:15,720
anzuzeigen, dass es sich um eine Sammlung von Werten handelt. Sie können diese beliebig benennen. Sie können auch ein

50
00:04:15,730 --> 00:04:16,900
Kleinbuchstaben c

51
00:04:16,900 --> 00:04:20,530
verwenden, wobei die Benennung keine Rolle spielt. Jetzt können

52
00:04:20,590 --> 00:04:23,980
Sie hier Farben verwenden, um Ihre Farben zuzuweisen.

53
00:04:24,010 --> 00:04:31,570
Für diese Schaltfläche zum Zurücksetzen verwenden wir jetzt einen dynamischen Wert, damit wir die Farben erreichen können. Akzent und hier für den Hauptknopf, für den

54
00:04:32,050 --> 00:04:39,080
Bestätigungsknopf, ich werde mit Farben gehen. primär und das gleiche

55
00:04:39,080 --> 00:04:44,630
in der Kopfzeile. Dort möchten wir jetzt natürlich auch diese Farbe

56
00:04:45,020 --> 00:04:52,180
verwenden und sie hier nicht fest codieren, sondern Farben aus Konstanten / Farben importieren. Mit dieser importierten Farbe können

57
00:04:52,370 --> 00:04:57,680
Sie sie auch in einem Stylesheet verwenden, nicht nur in jsx, sondern überall Immerhin

58
00:04:57,680 --> 00:04:59,420
werde ich in dieser

59
00:04:59,420 --> 00:05:05,680
Datei hier auf Farben verweisen. primär. Und wenn Sie das speichern, sehen

60
00:05:05,720 --> 00:05:13,460
wir wieder genauso aus wie zuvor, aber noch einmal auf eine elegantere Art und Weise. Wenn Sie jemals entscheiden, dass Ihre Akzentfarbe nicht diese Farbe,

61
00:05:13,460 --> 00:05:19,790
sondern blau sein soll, tauschen Sie sie einfach hier aus, Ihre App ist wieder aufgebaut und du hast einen blauen Knopf.

62
00:05:19,910 --> 00:05:26,630
Das ist der große Vorteil der Verwaltung Ihrer Farben oder anderer Kernkonstanten in solchen Dateien. Sie können

63
00:05:26,630 --> 00:05:34,910
beispielsweise eine andere Datei mit dem Namen Text verwenden, in der Sie einige Kernschriftgrößen oder einen anderen Dateibereich haben, in dem Sie

64
00:05:34,940 --> 00:05:41,000
Standardwerte für Ränder oder Auffüllungen speichern Sie müssen nicht immer wieder dieselben Werte manuell verwenden. Dies

65
00:05:41,000 --> 00:05:42,550
sind alles Ansätze,

66
00:05:42,620 --> 00:05:47,690
mit denen Sie Ihr Leben als Entwickler vereinfachen und Code erstellen können, mit

67
00:05:47,690 --> 00:05:50,900
dem Sie bei Bedarf schnell Werte austauschen können.

68
00:05:50,990 --> 00:05:56,360
Im Moment werde ich nur meine Farben dort verwalten, da dies eines der nervigsten Dinge beim Kopieren

69
00:05:56,360 --> 00:06:01,490
ist und es daher ein großartiger Ansatz ist, es in einer solchen Datei zu verwalten.