React Native: come gestisco le dimensioni dello schermo del 9000 Android?

Question

Ho appena creato l'applicazione più follemente complicata nel corso degli ultimi 6 mesi sia per iOS che per Android usando React nativo.

Tutto stava andando perfetto, e tutto funziona grande ...

ho progettato per l'iPhone 4s, 5, 6, 6 + utilizzando un componente speciale che ho scritto che funziona praticamente come ...

override: { 
    ip4: { fontSize: 8 }, 
    ip5: { fontSize: 10 } 
} 

ecc

Questo in realtà ha funzionato perfetto per iOS.

Oggi ho aperto GA ed ero terrorizzato di rendermi conto di aver dimenticato lo stile di Android. Ho esaminato la nostra analisi di Google e c'è letteralmente come ... 700 dimensioni dello schermo che sono tutte diverse.

Sono completamente confuso alla prospettiva di progettare per tutti questi, soprattutto considerando la densità di pixel multipli.

La mia domanda è, che cosa posso effettivamente fare per conto di ...

• margini/distanze (fondamentalmente interi generici per imbottitura o qualsiasi altra cosa)
• dimensioni dei caratteri

Quelli sono le 2 cose sono molto confuso su come gestire tutte le diverse combinazioni.

Ho dato un'occhiata a PixelRatio, ma non ho idea di come utilizzarlo o anche se sono sulla strada giusta.

Come gestiscono la maggior parte delle persone?

Answer 1

È possibile utilizzare sia Dimensioni che PixelRatio per ottenere le dimensioni e i pixel dello schermo. Io uso questo, ad esempio per impostare dimensionamento immagine in base alle dimensioni dello schermo ..

Ad esempio:

import Dimensions from 'Dimensions'; 
import PixelRatio from 'PixelRatio'; 

var {height, width} = Dimensions.get('window'); 
var pixelr = PixelRatio.get(); 

// Calculate styles, heights, fontsizes based on the numbers above 

Answer 2

È possibile utilizzare Media Queries per gestire le dimensioni dello schermo più, ero query uso dei media concetto di mia phonecap (cordova) nella fase precedente di sviluppo.

ho ricerca di esercitazione durante la ricerca, penso che sia utile,

https://www.npmjs.com/package/react-native-responsive

Answer 3

Abbiamo finito tyo uso flexboxes in tutto l'app. Quindi il contenuto si adatta a se stesso quando lo spazio è disponibile.

Ovviamente, abbiamo perso giorni interi a provare e testare