Daher haben wir uns die Abmessungen, Ausrichtungen und das Rendern verschiedener Stile und Layouts basierend auf der verfügbaren Breite
und Höhe genauer angesehen und auch, wie Sie auf Änderungen der Breite und Höhe reagieren können, wenn Sie
das Gerät drehen, zum Beispiel sehr wichtige Dinge.
Lassen Sie uns nun einen Blick darauf werfen, wie Sie je nach Plattform, auf der Sie ausgeführt werden, verschiedene
Stile oder Layouts oder was auch immer rendern können.
Im Moment haben wir im Grunde eine identische App für iOS und Android mit einer Ausnahme und das ist
unsere Schaltfläche hier.
Die Schaltflächen sehen anders aus, da die von uns verwendete Schaltflächenkomponente eine in React Native eingebaute
Komponente ist und eine der sehr seltenen, tatsächlich einzigen Komponenten ist, die React Native automatisch an die Plattform anpasst, auf der
Ihre App ausgeführt wird Komponente macht das wirklich, aber
natürlich können Sie Code schreiben, um Ihre Stile, Layout-Logik, was auch immer Sie wollen, basierend auf der Plattform,
auf der Sie laufen, anzupassen. Um ein Beispiel zu sehen, gehen wir zu
unserer Header-Komponente und arbeiten dort an der Art und Weise,
wie wir diesen Header präsentieren. Unter Android haben
wir möglicherweise diese Hintergrundfarbe und dann Text davor. Unter iOS
möchten wir möglicherweise eine weiße Hintergrundfarbe und nur einen dünnen Rand am unteren Rand
und stattdessen den Text in
unserer Primärfarbe, das wäre a Immerhin typischere iOS-Look.
Um herauszufinden, auf welcher Plattform Sie ausgeführt werden, hat React Native Sie abgedeckt. Es enthält das Plattformobjekt, mit dem
Sie mithilfe der Abmessungen die Abmessungen des Geräts ermitteln können, auf dem Sie ausgeführt werden. Mit der
Plattform können Sie die Plattform des Geräts ermitteln du rennst weiter
Hier in den von Ihnen erstellten Stilen
können wir nun basierend darauf eine andere Hintergrundfarbe rendern.
Wir können die Plattform verwenden und jetzt haben Sie einige Eigenschaften,
die Sie verwenden können, und zum Beispiel haben Sie die OS-Eigenschaft, und das Betriebssystem ist im Grunde das Betriebssystem und einer
der Werte,
die Sie hier sehen, vor allem iOS oder Android.
Hier können wir also überprüfen, ob dies gleich Android ist. In diesem Fall setze ich meine Hintergrundfarbe
auf Primärfarben. Wenn es
sich jedoch nicht um Android handelt und wenn es sich um iOS handelt, setze ich dies auf Weiß.
Wenn wir das jetzt tun und dies speichern, sehen wir hier auf dem iOS-Gerät einen weißen Header und auf dem
Android-Gerät einen farbigen Header.
Jetzt müssen Sie natürlich keinen Listener auf der Plattform einrichten und es bietet auch keine solche Funktionalität,
da sich die Plattform nicht ändern kann, während die App ausgeführt wird. Es ist natürlich
immer das gleiche Betriebssystem.
Lassen Sie uns nun das Styling für iOS beenden.
Ich sagte, ich möchte einen dünnen Rand am unteren Rand haben, damit wir einen Rand am
unteren Rand hinzufügen und die Plattform überprüfen können. Wenn das Betriebssystem dort iOS entspricht, möchte ich die Farbe am
unteren Rand des Randes so einstellen, dass dies beispielsweise grau ist Farbe, sonst sende ich
es an Weiß oder an Transparent, damit wir es auf Android nicht sehen können, und füge einen Rand unten mit
"sagen wir mal" hinzu. Dort machen wir auch diese Prüfung für iOS, sagen wir ein Pixel auf iOS und Null auf Android.
Jetzt sollten wir auf Android nichts mehr sehen, aber wir haben diesen dünnen Rand hier auf iOS.
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
für die Stil-Requisite festgelegt haben. Daher können wir
hier im Titel-Text eine Stil-Requisite hinzufügen und auf Stile zeigen. Titel hier oder wie auch immer Sie
es benennen möchten und fügen Sie hier in unserem Stylesheet ein solches Titelstilobjekt hinzu, in dem
wir die Farbe festlegen, die die Textfarbe ist, die auch auf der Plattform basiert.
Wenn das iOS ist, nehmen wir an, wir setzen dies auf Farben. primär und ansonsten setzen wir es auf weiß, es war vorher
schwarz, lass
es uns jetzt auf weiß setzen.
Jetzt haben wir hier auf Android einen weißen Titel, hier auf iOS einen farbigen Titel. So einfach können Sie verschiedene Stile basierend
auf der Plattform festlegen, auf der Sie ausgeführt werden, wie Sie
sehen können.