Reaccionar Nativo: ¿Cómo gestiono los tamaños de pantalla de Android 9000?

Acabo de construir la aplicación más increíble increíblemente complicado en el curso de los últimos 6 meses para ambos iOS y Android con React nativo.

Todo iba perfecto, y todo está funcionando muy bien …

Diseñé para el iPhone 4s, 5, 6, 6+ usando un componente especial que escribí que trabaja básicamente como …

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

Etc.

Esto realmente funcionó perfecto para iOS.

Hoy abrí GA y estaba aterrorizado al darse cuenta de que se me había olvidado del estilo de Android. Miré a nuestra analítica de Google y hay literalmente como … 700 tamaños de pantalla que son diferentes.

Estoy totalmente confundido en la perspectiva de diseñar para todos estos, especialmente teniendo en cuenta las densidades de píxeles múltiples.

Mi pregunta es, ¿Qué debo hacer para dar cuenta de …

  • Márgenes / espaciamientos (enteros básicamente genéricos para relleno o lo que sea)
  • Tamaños de fuente

Esas son las 2 cosas que estoy muy confundido cómo manejar todas las combinaciones diferentes.

He echado un vistazo a PixelRatio , pero no tengo ni idea de cómo usarlo o incluso si estoy en el camino correcto.

¿Cómo maneja la mayoría de la gente esto?

Puede utilizar tanto Dimensiones como PixelRatio para obtener las dimensiones de la pantalla y los píxeles. Yo uso esto por ejemplo para establecer el tamaño de la imagen en función del tamaño de la pantalla ..

Por ejemplo:

 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 

Usted puede utilizar Media Consultas para administrar los múltiples tamaños de pantalla, yo era el uso de medios de comunicación concepto en mi phonecap (Córdoba) en la etapa anterior de desarrollo.

He encontrado en el tutorial durante la búsqueda, creo que es útil,

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

Terminamos usamos flexboxes alrededor de la aplicación. Así que el contenido se acomodan cuando el espacio está disponible.

Por supuesto, perdimos días enteros en probar y probar

  • Cómo devolver un booleano de @ReactMethod en React Native?
  • Uso de sensores en Android con React Native
  • Reaccionar la aplicación nativa de Android se ha detenido
  • Error: No se puede encontrar el archivo con path: prelude_dev.js
  • Cómo utilizar una actividad de Android en React Native
  • Reaccionar nativo cómo deshabilitar Android modo dev
  • React-Native El nivel de API Android más bajo
  • "Obtener el paquete JS" Monstruosamente lento
  • Cmd: reaccionar-nativo run-android en cada cambio de archivo
  • Reaccionar Android nativo no se puede cargar JS paquete
  • Reaccionar Nativo <Image> no cargar imagen de sdcard en android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.