android - font - react native events

¿Cuál es la unidad de estilo predeterminada en React Native?

Question

Estoy contribuyendo a un proyecto de código abierto en el que estoy desarrollando el diseño de materiales para React Native. Estoy bloqueado en el trabajo, no puedo realizar algunas mejoras en el nivel de la interfaz de usuario, como el relleno, la alineación, etc.

Esta es la especificación oficial de diseño de materiales para cajones

En la imagen de arriba, la UNIDAD de medida es dp .

Pero, en mi código React Native, veo que no se mencionan tales unidades. Teniendo en cuenta que es "reaccionar nativo" estoy confundido si es px o dp .

Incluso revisé el componente Documentos nativos de React Native for Style . No veo una mención en ninguna parte.

Mi código se parece a

const styles = {
    touchable: {
        paddingHorizontal: 16,
        marginVertical: 8,
        height: 48
    },
    item: {
        flex: 1,
        flexDirection: ''row'',
        alignItems: ''center'',
    },
    icon: {
        position: ''relative'',
    },
    value: {
        flex: 1,
        paddingLeft: 34,
        top: 2
    },
    label: {
        top: 2
    }
},

Por favor, ¿puedes decirme si esto es pixeles o dp? Y también, es 1px = 1dp ?

Answer 1

Comparto su confusión de alguna manera, no poder inspeccionar activamente con una consola de desarrollador como estamos acostumbrados en el navegador.

No estoy familiarizado con la unidad ''dp'', pero de lo que acumulo width: 1 procesa de manera diferente en cada dispositivo dependiendo de la densidad de píxeles de la pantalla (ver enlace). La información en los documentos nativos de reacción dice que 1 volvería más grueso en las pantallas con alta densidad de píxeles. Lo que luego suena lógico, ya que tiene más precisión en las pantallas de alta densidad que en las pantallas de baja densidad y los objetivos nativos de reacción son universales, por lo que no supondría un alto dpi.

Tengo entendido que puede usar la API de PixelRatio vinculada a continuación para calcular tamaños para elementos de detalle (piense bordes, íconos, etc.), de esa manera puede ajustar dinámicamente el tamaño renderizado de acuerdo con la densidad de la pantalla del dispositivo.

https://facebook.github.io/react-native/docs/pixelratio.html#content

Answer 2

De la docs :

Todas las dimensiones en React Native no tienen unidades y representan píxeles independientes de la densidad. Configurar las dimensiones de esta manera es común para los componentes que siempre deben mostrarse exactamente en el mismo tamaño, independientemente de las dimensiones de la pantalla.

Así que sí, las unidades en React Native están en dp . Si desea convertirlos a píxeles, use PixelRatio.getPixelSizeForLayoutSize()

Answer 3

Es la relación de píxeles que tienes que considerar. píxel representa un valor absoluto. La proporción de píxeles es un valor relativo. para hacer que la pantalla de la aplicación y los componentes respondan, tienes que usar la proporción de píxeles.

He estado usando en varias aplicaciones ya. Y creo que así es como tienes que hacerlo. Espero que esto responda a su pregunta.

Answer 4

Por lo que sé, el estilo de javascript que usamos en reaccionar js o reaccionar de forma nativa utiliza píxeles. La proporción de píxeles solo es necesaria para admitir diferentes tamaños de pantallas de dispositivos móviles.