1 00:00:02,330 --> 00:00:06,200 Jetzt kann es manchmal umständlich sein, eine Reihe solcher Prüfungen hinzuzufügen, 2 00:00:06,200 --> 00:00:09,920 und hier haben wir zum Beispiel bereits drei Prüfungen 3 00:00:09,920 --> 00:00:14,070 im Header, sicherlich etwas, das wir hinzufügen können, aber vielleicht nicht optimal. 4 00:00:14,480 --> 00:00:22,970 Anstatt unsere Stilobjekte sauberer zu halten, könnten wir hier einen Basisheader einrichten, zum Beispiel Header Base, 5 00:00:23,360 --> 00:00:37,110 und dann headerIOS und headerAndroid hinzufügen. Jetzt nehmen wir alle diese Stile, die sich je nach Plattform ändern, aus dem Basisstil heraus. füge sie hier zu 6 00:00:37,110 --> 00:00:39,600 headerIOS und headerAndroid hinzu 7 00:00:39,860 --> 00:00:44,830 und unter headerIOS behalten wir nur das iOS-Aussehen hier 8 00:00:44,970 --> 00:00:51,020 bei, also weiß, dann diese Farbe für den Rand unten und 9 00:00:56,160 --> 00:01:04,100 eine Pixelbreite von eins für diesen Rand und hier bei Android entfernen wir dieses Häkchen 10 00:01:04,200 --> 00:01:13,200 und Behalten Sie die primäre Farbe als Hintergrundfarbe bei. Auf der anderen Seite entfernen wir unseren Rand, 11 00:01:13,200 --> 00:01:19,800 indem wir diese Werte verwenden oder diese vollständig entfernen und überhaupt nicht 12 00:01:19,800 --> 00:01:20,970 festlegen. 13 00:01:20,970 --> 00:01:28,590 Jetzt müssen wir nur noch sicherstellen, dass wir headerIOS oder headerAndroid hinzufügen. Dazu können wir hier nach 14 00:01:28,690 --> 00:01:35,050 oben gehen und unser Styles-Objekt einrichten, in dem wir jetzt alle unsere Header-Basisstile zusammenführen. 15 00:01:35,070 --> 00:01:45,500 Diese sind also immer festgelegt, aber jetzt zusätzlich kann im Ergebnis der Plattformauswahl zusammengeführt werden. Dies ist nun eine Methode, die ein Objekt verwendet, 16 00:01:45,500 --> 00:01:54,770 bei dem wir einen iOS-Schlüssel angeben und auf den Wert zeigen müssen, oder in diesem Fall das Objekt, das wir verwenden 17 00:01:54,770 --> 00:02:02,270 möchten, wenn wir unter iOS Stile verwenden. headerIOS und fügen Sie einen Android-Schlüssel hinzu und zeigen 18 00:02:02,270 --> 00:02:05,310 Sie auf Stile, die headerAndroid und 19 00:02:05,540 --> 00:02:12,380 damit React Native mitteilen. Bitte führen Sie die Eigenschaften des Werts zusammen, in diesem Fall eines 20 00:02:12,380 --> 00:02:15,680 Objekts, das wir für iOS und Android auswählen. 21 00:02:15,680 --> 00:02:21,410 Sie müssen also immer ein Objekt an die Plattformauswahl übergeben und haben dann unterschiedliche Werte für iOS und Android. Der 22 00:02:21,410 --> 00:02:26,390 Wert hier könnte auch eine Zahl sein. Dies würde hier einfach nicht funktionieren, da wir hier 23 00:02:26,390 --> 00:02:32,350 tatsächlich ein Objekt erwarten, damit wir es können Ziehen Sie alle Eigenschaftswertpaare heraus und übergeben Sie sie an unseren umgebenden Stil. 24 00:02:32,360 --> 00:02:37,310 Hier macht eine Zahl keinen Sinn, aber Sie können select mit jeder Art von Wert verwenden. 25 00:02:37,370 --> 00:02:38,960 Hier benötigen wir nur 26 00:02:39,020 --> 00:02:45,410 ein Objekt, also zeigen wir auf die Objekte headerIOS und headerAndroid. Und damit haben wir schlankeren Code, wir haben 27 00:02:45,680 --> 00:02:51,110 dort unten schlankere Stile und dann haben wir Code mit einem Basisstil, bei dem wir 28 00:02:51,110 --> 00:02:57,230 dann mithilfe der Plattformauswahl verschiedene Stile dynamisch auswählen, basierend auf der Plattform, auf der wir ausgeführt werden, und 29 00:02:57,230 --> 00:03:04,760 daher jetzt Wir sehen genauso aus wie zuvor, aber jetzt eleganter. Ein weiterer Ort in unserer App, an dem wir 30 00:03:04,760 --> 00:03:11,360 dies nutzen können, ist unser Hauptknopf hier. Unser Hauptknopf sieht auf beiden Plattformen gleich aus und fühlt sich auch so an, 31 00:03:11,480 --> 00:03:14,780 was nicht schrecklich ist, aber möglicherweise auch nicht das ist, was wir wollen. 32 00:03:15,590 --> 00:03:21,590 Wenn wir zu unserem MainButton gehen. js Datei, wir sehen, wir verwenden hier immer berührbare Deckkraft, aber tatsächlich 33 00:03:21,590 --> 00:03:23,940 möchten wir unter Android möglicherweise den Ripple-Effekt verwenden. 34 00:03:23,990 --> 00:03:30,740 Zum Glück ist in React Native die berührbare native Feedback-Komponente integriert, mit der wir tatsächlich ein berührbares 35 00:03:30,740 --> 00:03:33,830 Objekt mit integriertem Ripple-Effekt erhalten. Daher möchten 36 00:03:33,920 --> 00:03:38,730 wir dies unter Android und die berührbare Deckkraft unter iOS verwenden. 37 00:03:38,810 --> 00:03:44,300 Jetzt können wir natürlich die Plattform-API verwenden, die wir daher auch aus React Native importieren müssen, 38 00:03:44,330 --> 00:03:47,510 um hier eine andere Komponente basierend auf der Plattform 39 00:03:47,630 --> 00:03:52,520 zu verwenden. Dafür können wir eine wirklich nette Funktion verwenden, die React nicht React 40 00:03:52,520 --> 00:03:54,200 Native-spezifisch hat, aber wir 41 00:03:54,290 --> 00:04:00,200 können sie verwenden In React im Allgemeinen können wir eine Variable einrichten, die mit einem Großbuchstaben beginnt, 42 00:04:00,230 --> 00:04:07,430 damit wir sie als jsx-Element verwenden können, da nur Großbuchstabenvariablen als jsx-Elemente verwendet werden können, und wir nennen dies beispielsweise die 43 00:04:07,490 --> 00:04:12,170 Schaltflächenkomponente, den Namen liegt ganz bei Ihnen und standardmäßig ist dies eine berührbare Deckkraft. 44 00:04:12,170 --> 00:04:19,730 Also zeige ich hier auf das berührbare Deckkraftobjekt ohne abgewinkelte Klammern und zeige einfach so darauf. 45 00:04:19,730 --> 00:04:27,350 Jetzt können wir eine if-Prüfung hinzufügen und prüfen, ob das Plattformbetriebssystem gleich Android und wichtig ist, auch 46 00:04:27,350 --> 00:04:29,230 etwas anderes auf 47 00:04:29,240 --> 00:04:37,210 der Plattform prüfen und prüfen, ob die Plattformversion größer oder gleich 21 ist, da nur die Android-API-Version 48 00:04:37,230 --> 00:04:40,040 21 oder höher den Ripple-Effekt unterstützt. 49 00:04:40,100 --> 00:04:46,130 Wenn also beides zutrifft, setzen wir die Schaltflächenkomponente auf berührbares natives Feedback, sodass wir 50 00:04:46,130 --> 00:04:50,480 die mit dem Welleneffekt verwenden, andernfalls die mit dem Deckkrafteffekt. 51 00:04:50,600 --> 00:04:56,930 Wenn wir also auf Android sind und die Android-Version hoch genug ist, 21 oder 52 00:04:56,930 --> 00:05:03,350 höher, verwenden wir berührbares natives Feedback. Jetzt, da ich dies mit einem Großbuchstaben benenne, können wir dies 53 00:05:03,350 --> 00:05:12,260 hier anstelle der berührbaren Deckkraft in unserem jsx-Code verwenden. Sieht zunächst seltsam aus, funktioniert aber einwandfrei. Wenn wir dies jetzt speichern und neu starten, 54 00:05:12,500 --> 00:05:22,640 sehen Sie hier, dass Sie diesen Welleneffekt haben. Sie können ihn sehen, wenn wir gedrückt halten. Sie sehen 55 00:05:22,640 --> 00:05:29,450 diesen Welleneffekt auf der Schaltfläche. Sieht noch nicht perfekt aus, da es tatsächlich 56 00:05:29,450 --> 00:05:33,350 rechteckig ist und unseren Randradius nicht berücksichtigt. Wir werden das beheben, 57 00:05:33,350 --> 00:05:40,340 aber es funktioniert. Andererseits haben wir hier unter iOS den Deckkrafteffekt, wie Sie sehen können, wenn Sie diese Taste drücken. 58 00:05:40,340 --> 00:05:47,990 Lassen Sie uns nun den Randradius festlegen, und wir können dies tun, indem wir dies mit einer anderen Ansicht umschließen. Dies ist nur 59 00:05:47,990 --> 00:05:51,780 ein kleiner Hack, eine kleine Problemumgehung, die Sie beachten müssen. 60 00:05:52,010 --> 00:05:57,490 Wir schließen dies mit einer anderen Ansicht ein, in der ich einen Stil 61 00:05:58,480 --> 00:06:07,430 für beispielsweise einen Schaltflächencontainer festlege, diesen Stil dort unten in unserem Stylesheet hinzufüge und auf dem Schaltflächencontainer hier, der jetzt um alles 62 00:06:07,430 --> 00:06:08,640 gewickelt ist, 63 00:06:08,780 --> 00:06:17,910 den gleichen Rahmenradius wie für die Schaltfläche festgelegt habe , also 25 in diesem Fall hier und ich füge einen versteckten Überlauf hinzu, 64 00:06:18,000 --> 00:06:25,320 was bedeutet, dass jede untergeordnete Komponente, die über die Grenzen dieser Komponenten hinausgehen würde, also der Komponente mit 65 00:06:25,320 --> 00:06:31,170 diesem Stil, grundsätzlich abgeschnitten wird und dies sicherstellt, dass der Welleneffekt, der jetzt a 66 00:06:31,170 --> 00:06:36,670 ist Die untergeordnete Komponente dieser Ansicht wird an den abgerundeten Kanten dieser Schaltfläche abgeschnitten. 67 00:06:37,210 --> 00:06:44,070 Wenn wir dies jetzt speichern und es erneut versuchen, werden Sie sehen, dass der Ripple-Effekt nur die Schaltfläche ausfüllt, was 68 00:06:44,070 --> 00:06:50,200 natürlich viel besser aussieht, und unter iOS haben wir natürlich immer noch das gleiche Verhalten wie zuvor. 69 00:06:51,070 --> 00:06:55,750 Wir können die Plattform hier also auch in einem if-Check verwenden, aber wir können diesen netten 70 00:06:55,780 --> 00:07:01,180 Trick auch hier verwenden, um basierend auf der Plattform, auf der wir ausgeführt werden, völlig unterschiedliche Komponenten zu 71 00:07:01,180 --> 00:07:01,780 rendern.