Native Constant Layout auf mehreren Geräten reagieren

Question

Ich habe eine minimale App mit grundlegenden Ansichten, Texten, Bildern und Schaltflächen in nativen reagieren. Das Problem, mit dem ich konfrontiert bin, liegt in der Verwaltung des Layouts für mehrere Geräte. Alle Vorschläge, wie kann ich die gleiche (proportionale) Ansicht & Schriftgröße für mehrere Geräte (mehrere Bildschirmauflösungen und Bildschirmgrößen) beibehalten.

Ausblick: Zum Beispiel, wenn ich eine Listenansicht der Elemente möge, wobei jede Zeile ein Bild auf der linken Seite hat, einiger Text zwischen und 2-Tasten auf dem rechten Seite (untereinander also flex-direction: 'column'), wie kann Ich sehe das auf einem 5 "Gerät genauso gut aus wie auf einem 10" Gerät?

Denken Sie auch an die Tasten haben einige borderRadius, wenn wir die Tasten skalieren, muss der borderRadius Wert auch erhöht werden. Wie erreiche ich das?

Fonts: Ich habe versucht mit PixelRatio.getFontScale(), aber das skaliert die Schriftart abhängig nur von der Auflösung (von dem, was ich verstanden habe). Dadurch wird eine Schrift der Größe 12 auf einem 5 "Gerät mit höherer Auflösung größer und auf einem 10" Gerät mit niedrigerer Auflösung kleiner. Wie kann ich die Schriftgrößen für die reaktive native App verwalten?

Answer 1

Zusätzlich zur PixelRatio.getFontScale() können Sie auch die API Dimensions verwenden, um die Höhe und Breite des Fensters zu erhalten und Ihre Komponenten relativ dazu zu skalieren. Ich habe eine App gebaut, die sowohl auf iOS als auch auf Android läuft und diese verwendet, um die Breite + Höhe zu skalieren.

Kasse der Link Dimensions @ Facebook - React Native

dh.

Dimensions.get('window').width; Dimensions.get('window').height;

Werden Sie geben die Größe des Fensters