Saltar al contenido principal
Versión: Siguiente

PixelRatio

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

PixelRatio te da acceso a la densidad de píxeles del dispositivo y a la escala de fuentes.

Obtención de una imagen de tamaño correcto​

Debes obtener una imagen de mayor resolución si estás en un dispositivo de alta densidad de píxeles. Una buena regla general es multiplicar el tamaño de la imagen que muestras por la relación de píxeles.

tsx
const image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />;

Ajuste a la cuadrícula de píxeles​

En iOS, puedes especificar posiciones y dimensiones para elementos con precisión arbitraria, por ejemplo 29.674825. Pero finalmente la pantalla física solo tiene un número fijo de píxeles, como 640×1136 para iPhone SE (1ª generación) o 828×1792 para iPhone 11. iOS intenta ser lo más fiel posible al valor del usuario extendiendo un píxel original en múltiples para engañar al ojo. La desventaja de esta técnica es que hace que el elemento resultante se vea borroso.

En la práctica, descubrimos que los desarrolladores no quieren esta característica y tienen que evitarla haciendo redondeo manual para evitar elementos borrosos. En React Native, redondeamos todos los píxeles automáticamente.

Debemos tener cuidado al realizar este redondeo. Nunca querrás trabajar con valores redondeados y sin redondear al mismo tiempo porque acumularás errores de redondeo. Tener incluso un error de redondeo es fatal porque un borde de un píxel puede desaparecer o volverse el doble de grande.

En React Native, todo en JavaScript y dentro del motor de diseño funciona con números de precisión arbitraria. Solo cuando establecemos la posición y dimensiones del elemento nativo en el hilo principal es que redondeamos. Además, el redondeo se realiza en relación con la raíz en lugar del padre, nuevamente para evitar acumular errores de redondeo.

Ejemplo​

Referencia

Métodos​

get()​

tsx
static get(): number;

Devuelve la densidad de píxeles del dispositivo. Algunos ejemplos:

getFontScale()​

tsx
static getFontScale(): number;

Devuelve el factor de escala para los tamaños de fuente. Esta es la relación que se utiliza para calcular el tamaño de fuente absoluto, por lo que cualquier elemento que dependa en gran medida de esto debe usarlo para hacer cálculos.

  • en Android, el valor refleja la preferencia del usuario establecida en Ajustes > Pantalla > Tamaño de fuente

  • en iOS, el valor refleja la preferencia del usuario establecida en Ajustes > Pantalla y brillo > Tamaño del texto, el valor también se puede actualizar en Ajustes > Accesibilidad > Pantalla y tamaño de texto > Texto más grande

Si no se establece una escala de fuente, devuelve la relación de píxeles del dispositivo.

getPixelSizeForLayoutSize()​

tsx
static getPixelSizeForLayoutSize(layoutSize: number): number;

Convierte un tamaño de diseño (dp) a tamaño de píxel (px).

Garantizado a devolver un número entero.

roundToNearestPixel()​

tsx
static roundToNearestPixel(layoutSize: number): number;

Redondea un tamaño de diseño (dp) al tamaño de diseño más cercano que corresponde a un número entero de píxeles. Por ejemplo, en un dispositivo con un PixelRatio de 3, PixelRatio.roundToNearestPixel(8.4) = 8.33, lo que corresponde exactamente a (8.33 * 3) = 25 píxeles.