Jetzt kann es manchmal umständlich sein, eine Reihe solcher Prüfungen hinzuzufügen,
und hier haben wir zum Beispiel bereits drei Prüfungen
im Header, sicherlich etwas, das wir hinzufügen können, aber vielleicht nicht optimal.
Anstatt unsere Stilobjekte sauberer zu halten, könnten wir hier einen Basisheader einrichten, zum Beispiel Header Base,
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
headerIOS und headerAndroid hinzu
und unter headerIOS behalten wir nur das iOS-Aussehen hier
bei, also weiß, dann diese Farbe für den Rand unten und
eine Pixelbreite von eins für diesen Rand und hier bei Android entfernen wir dieses Häkchen
und Behalten Sie die primäre Farbe als Hintergrundfarbe bei. Auf der anderen Seite entfernen wir unseren Rand,
indem wir diese Werte verwenden oder diese vollständig entfernen und überhaupt nicht
festlegen.
Jetzt müssen wir nur noch sicherstellen, dass wir headerIOS oder headerAndroid hinzufügen. Dazu können wir hier nach
oben gehen und unser Styles-Objekt einrichten, in dem wir jetzt alle unsere Header-Basisstile zusammenführen.
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,
bei dem wir einen iOS-Schlüssel angeben und auf den Wert zeigen müssen, oder in diesem Fall das Objekt, das wir verwenden
möchten, wenn wir unter iOS Stile verwenden. headerIOS und fügen Sie einen Android-Schlüssel hinzu und zeigen
Sie auf Stile, die headerAndroid und
damit React Native mitteilen. Bitte führen Sie die Eigenschaften des Werts zusammen, in diesem Fall eines
Objekts, das wir für iOS und Android auswählen.
Sie müssen also immer ein Objekt an die Plattformauswahl übergeben und haben dann unterschiedliche Werte für iOS und Android. Der
Wert hier könnte auch eine Zahl sein. Dies würde hier einfach nicht funktionieren, da wir hier
tatsächlich ein Objekt erwarten, damit wir es können Ziehen Sie alle Eigenschaftswertpaare heraus und übergeben Sie sie an unseren umgebenden Stil.
Hier macht eine Zahl keinen Sinn, aber Sie können select mit jeder Art von Wert verwenden.
Hier benötigen wir nur
ein Objekt, also zeigen wir auf die Objekte headerIOS und headerAndroid. Und damit haben wir schlankeren Code, wir haben
dort unten schlankere Stile und dann haben wir Code mit einem Basisstil, bei dem wir
dann mithilfe der Plattformauswahl verschiedene Stile dynamisch auswählen, basierend auf der Plattform, auf der wir ausgeführt werden, und
daher jetzt Wir sehen genauso aus wie zuvor, aber jetzt eleganter. Ein weiterer Ort in unserer App, an dem wir
dies nutzen können, ist unser Hauptknopf hier. Unser Hauptknopf sieht auf beiden Plattformen gleich aus und fühlt sich auch so an,
was nicht schrecklich ist, aber möglicherweise auch nicht das ist, was wir wollen.
Wenn wir zu unserem MainButton gehen. js Datei, wir sehen, wir verwenden hier immer berührbare Deckkraft, aber tatsächlich
möchten wir unter Android möglicherweise den Ripple-Effekt verwenden.
Zum Glück ist in React Native die berührbare native Feedback-Komponente integriert, mit der wir tatsächlich ein berührbares
Objekt mit integriertem Ripple-Effekt erhalten. Daher möchten
wir dies unter Android und die berührbare Deckkraft unter iOS verwenden.
Jetzt können wir natürlich die Plattform-API verwenden, die wir daher auch aus React Native importieren müssen,
um hier eine andere Komponente basierend auf der Plattform
zu verwenden. Dafür können wir eine wirklich nette Funktion verwenden, die React nicht React
Native-spezifisch hat, aber wir
können sie verwenden In React im Allgemeinen können wir eine Variable einrichten, die mit einem Großbuchstaben beginnt,
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
Schaltflächenkomponente, den Namen liegt ganz bei Ihnen und standardmäßig ist dies eine berührbare Deckkraft.
Also zeige ich hier auf das berührbare Deckkraftobjekt ohne abgewinkelte Klammern und zeige einfach so darauf.
Jetzt können wir eine if-Prüfung hinzufügen und prüfen, ob das Plattformbetriebssystem gleich Android und wichtig ist, auch
etwas anderes auf
der Plattform prüfen und prüfen, ob die Plattformversion größer oder gleich 21 ist, da nur die Android-API-Version
21 oder höher den Ripple-Effekt unterstützt.
Wenn also beides zutrifft, setzen wir die Schaltflächenkomponente auf berührbares natives Feedback, sodass wir
die mit dem Welleneffekt verwenden, andernfalls die mit dem Deckkrafteffekt.
Wenn wir also auf Android sind und die Android-Version hoch genug ist, 21 oder
höher, verwenden wir berührbares natives Feedback. Jetzt, da ich dies mit einem Großbuchstaben benenne, können wir dies
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,
sehen Sie hier, dass Sie diesen Welleneffekt haben. Sie können ihn sehen, wenn wir gedrückt halten. Sie sehen
diesen Welleneffekt auf der Schaltfläche. Sieht noch nicht perfekt aus, da es tatsächlich
rechteckig ist und unseren Randradius nicht berücksichtigt. Wir werden das beheben,
aber es funktioniert. Andererseits haben wir hier unter iOS den Deckkrafteffekt, wie Sie sehen können, wenn Sie diese Taste drücken.
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
ein kleiner Hack, eine kleine Problemumgehung, die Sie beachten müssen.
Wir schließen dies mit einer anderen Ansicht ein, in der ich einen Stil
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
gewickelt ist,
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,
was bedeutet, dass jede untergeordnete Komponente, die über die Grenzen dieser Komponenten hinausgehen würde, also der Komponente mit
diesem Stil, grundsätzlich abgeschnitten wird und dies sicherstellt, dass der Welleneffekt, der jetzt a
ist Die untergeordnete Komponente dieser Ansicht wird an den abgerundeten Kanten dieser Schaltfläche abgeschnitten.
Wenn wir dies jetzt speichern und es erneut versuchen, werden Sie sehen, dass der Ripple-Effekt nur die Schaltfläche ausfüllt, was
natürlich viel besser aussieht, und unter iOS haben wir natürlich immer noch das gleiche Verhalten wie zuvor.
Wir können die Plattform hier also auch in einem if-Check verwenden, aber wir können diesen netten
Trick auch hier verwenden, um basierend auf der Plattform, auf der wir ausgeführt werden, völlig unterschiedliche Komponenten zu
rendern.