1 00:00:02,230 --> 00:00:08,380 Daher haben wir uns die Abmessungen, Ausrichtungen und das Rendern verschiedener Stile und Layouts basierend auf der verfügbaren Breite 2 00:00:08,380 --> 00:00:14,030 und Höhe genauer angesehen und auch, wie Sie auf Änderungen der Breite und Höhe reagieren können, wenn Sie 3 00:00:14,080 --> 00:00:17,010 das Gerät drehen, zum Beispiel sehr wichtige Dinge. 4 00:00:17,680 --> 00:00:22,900 Lassen Sie uns nun einen Blick darauf werfen, wie Sie je nach Plattform, auf der Sie ausgeführt werden, verschiedene 5 00:00:23,080 --> 00:00:25,660 Stile oder Layouts oder was auch immer rendern können. 6 00:00:25,660 --> 00:00:31,120 Im Moment haben wir im Grunde eine identische App für iOS und Android mit einer Ausnahme und das ist 7 00:00:31,120 --> 00:00:32,240 unsere Schaltfläche hier. 8 00:00:32,320 --> 00:00:38,320 Die Schaltflächen sehen anders aus, da die von uns verwendete Schaltflächenkomponente eine in React Native eingebaute 9 00:00:38,320 --> 00:00:46,060 Komponente ist und eine der sehr seltenen, tatsächlich einzigen Komponenten ist, die React Native automatisch an die Plattform anpasst, auf der 10 00:00:46,060 --> 00:00:49,310 Ihre App ausgeführt wird Komponente macht das wirklich, aber 11 00:00:49,390 --> 00:00:56,290 natürlich können Sie Code schreiben, um Ihre Stile, Layout-Logik, was auch immer Sie wollen, basierend auf der Plattform, 12 00:00:56,320 --> 00:01:01,000 auf der Sie laufen, anzupassen. Um ein Beispiel zu sehen, gehen wir zu 13 00:01:01,000 --> 00:01:04,170 unserer Header-Komponente und arbeiten dort an der Art und Weise, 14 00:01:04,180 --> 00:01:08,020 wie wir diesen Header präsentieren. Unter Android haben 15 00:01:08,020 --> 00:01:12,810 wir möglicherweise diese Hintergrundfarbe und dann Text davor. Unter iOS 16 00:01:12,820 --> 00:01:19,240 möchten wir möglicherweise eine weiße Hintergrundfarbe und nur einen dünnen Rand am unteren Rand 17 00:01:19,240 --> 00:01:21,750 und stattdessen den Text in 18 00:01:21,760 --> 00:01:25,270 unserer Primärfarbe, das wäre a Immerhin typischere iOS-Look. 19 00:01:25,360 --> 00:01:31,810 Um herauszufinden, auf welcher Plattform Sie ausgeführt werden, hat React Native Sie abgedeckt. Es enthält das Plattformobjekt, mit dem 20 00:01:32,110 --> 00:01:37,630 Sie mithilfe der Abmessungen die Abmessungen des Geräts ermitteln können, auf dem Sie ausgeführt werden. Mit der 21 00:01:37,630 --> 00:01:41,750 Plattform können Sie die Plattform des Geräts ermitteln du rennst weiter 22 00:01:41,910 --> 00:01:45,270 Hier in den von Ihnen erstellten Stilen 23 00:01:45,270 --> 00:01:48,660 können wir nun basierend darauf eine andere Hintergrundfarbe rendern. 24 00:01:48,810 --> 00:01:53,310 Wir können die Plattform verwenden und jetzt haben Sie einige Eigenschaften, 25 00:01:53,310 --> 00:02:01,170 die Sie verwenden können, und zum Beispiel haben Sie die OS-Eigenschaft, und das Betriebssystem ist im Grunde das Betriebssystem und einer 26 00:02:01,170 --> 00:02:02,220 der Werte, 27 00:02:02,220 --> 00:02:05,670 die Sie hier sehen, vor allem iOS oder Android. 28 00:02:05,700 --> 00:02:12,000 Hier können wir also überprüfen, ob dies gleich Android ist. In diesem Fall setze ich meine Hintergrundfarbe 29 00:02:12,000 --> 00:02:13,570 auf Primärfarben. Wenn es 30 00:02:13,770 --> 00:02:20,130 sich jedoch nicht um Android handelt und wenn es sich um iOS handelt, setze ich dies auf Weiß. 31 00:02:20,130 --> 00:02:28,800 Wenn wir das jetzt tun und dies speichern, sehen wir hier auf dem iOS-Gerät einen weißen Header und auf dem 32 00:02:28,980 --> 00:02:31,090 Android-Gerät einen farbigen Header. 33 00:02:31,260 --> 00:02:36,960 Jetzt müssen Sie natürlich keinen Listener auf der Plattform einrichten und es bietet auch keine solche Funktionalität, 34 00:02:37,140 --> 00:02:42,090 da sich die Plattform nicht ändern kann, während die App ausgeführt wird. Es ist natürlich 35 00:02:42,090 --> 00:02:43,800 immer das gleiche Betriebssystem. 36 00:02:43,830 --> 00:02:46,240 Lassen Sie uns nun das Styling für iOS beenden. 37 00:02:46,650 --> 00:02:53,340 Ich sagte, ich möchte einen dünnen Rand am unteren Rand haben, damit wir einen Rand am 38 00:02:53,340 --> 00:03:01,410 unteren Rand hinzufügen und die Plattform überprüfen können. Wenn das Betriebssystem dort iOS entspricht, möchte ich die Farbe am 39 00:03:01,410 --> 00:03:07,950 unteren Rand des Randes so einstellen, dass dies beispielsweise grau ist Farbe, sonst sende ich 40 00:03:07,980 --> 00:03:16,350 es an Weiß oder an Transparent, damit wir es auf Android nicht sehen können, und füge einen Rand unten mit 41 00:03:16,770 --> 00:03:25,590 "sagen wir mal" hinzu. Dort machen wir auch diese Prüfung für iOS, sagen wir ein Pixel auf iOS und Null auf Android. 42 00:03:25,590 --> 00:03:31,410 Jetzt sollten wir auf Android nichts mehr sehen, aber wir haben diesen dünnen Rand hier auf iOS. 43 00:03:31,530 --> 00:03:39,530 Zu guter Letzt färben wir den Text ein, indem wir hier zum Titeltext gehen. Der Titeltext wird in der Tat in allen Stilen zusammengeführt, die wir 44 00:03:39,590 --> 00:03:42,400 für die Stil-Requisite festgelegt haben. Daher können wir 45 00:03:42,770 --> 00:03:48,950 hier im Titel-Text eine Stil-Requisite hinzufügen und auf Stile zeigen. Titel hier oder wie auch immer Sie 46 00:03:48,960 --> 00:03:55,440 es benennen möchten und fügen Sie hier in unserem Stylesheet ein solches Titelstilobjekt hinzu, in dem 47 00:03:55,860 --> 00:04:01,380 wir die Farbe festlegen, die die Textfarbe ist, die auch auf der Plattform basiert. 48 00:04:01,770 --> 00:04:08,970 Wenn das iOS ist, nehmen wir an, wir setzen dies auf Farben. primär und ansonsten setzen wir es auf weiß, es war vorher 49 00:04:08,970 --> 00:04:09,830 schwarz, lass 50 00:04:09,840 --> 00:04:11,700 es uns jetzt auf weiß setzen. 51 00:04:11,700 --> 00:04:18,990 Jetzt haben wir hier auf Android einen weißen Titel, hier auf iOS einen farbigen Titel. So einfach können Sie verschiedene Stile basierend 52 00:04:18,990 --> 00:04:22,600 auf der Plattform festlegen, auf der Sie ausgeführt werden, wie Sie 53 00:04:22,620 --> 00:04:23,400 sehen können.