Qual è l'unità di stile predefinita in React Native?

Question

Contribuisco a un progetto Open Source dove sto sviluppando Material design per React Native. Sono bloccato al lavoro, non sono in grado di apportare miglioramenti del livello dell'interfaccia utente w.r.t. padding, l'allineamento ecc,

Questa è la Spec Ufficiale di materiale Design per Drawer-

Nell'immagine sopra, il UNIT di misura è dp.

Ma, nel mio codice React Native, vedo che non sono menzionate tali unità. Considerando che è "reagire nativo" sono confuso se sia px o dp.

Ho persino esaminato il documento ufficiale del componente React Native for Style. Non vedo alcuna menzione da nessuna parte.

My Code appare come-

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 
    } 
}, 

per favore potete dirmi, se questo è pixel o dp? E inoltre, è 1px = 1dp?

Answer 1

Condivido la tua confusione, non essendo in grado di ispezionare attivamente con una console di sviluppo come siamo abituati nel browser.

Non ho dimestichezza con l'unità 'dp', ma da ciò che deduco width: 1 viene visualizzato in modo diverso su ciascun dispositivo a seconda della densità dei pixel dello schermo (vedi link). Le informazioni contenute nei documenti nativi del react affermano che 1 si renderà più denso su schermi con alta densità di pixel. Il che suona quindi logico in quanto si ha una maggiore precisione sugli schermi ad alta densità rispetto a quelli che si avrebbero su schermi a bassa densità e reagire - gli obiettivi nativi per essere universali in modo tale da non assumere valori di dpi alti.

È a mia conoscenza che è possibile utilizzare l'API PixelRatio di seguito collegata per calcolare le dimensioni degli elementi di dettaglio (si pensi a bordi, icone, ecc.) In questo modo è possibile regolare dinamicamente le dimensioni del rendering in base alla densità dello schermo del dispositivo.

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

Answer 2

Da quello che so, lo stile javascript che usiamo in reagiamo js o reagiamo nativo utilizza pixel. Il rapporto pixel è necessario solo per supportare diverse dimensioni degli schermi dei dispositivi mobili.

Answer 3

È il rapporto di pixel che è necessario considerare. pixel rappresenta un valore assoluto. il rapporto pixel è un valore relativo. per rendere reattivo lo schermo e i componenti delle app devi usare il rapporto pixel.

ho utilizzato già in più applicazioni. e penso che sia così che devi farlo. spero che questo risponda alla tua domanda.

Answer 4

Dal docs:

Tutte le dimensioni in React nativi sono senza unità, e rappresentano pixel indipendenti dalla densità. L'impostazione delle dimensioni in questo modo è comune per i componenti che devono sempre essere visualizzati con le stesse dimensioni, indipendentemente dalle dimensioni dello schermo.

Quindi sì, le unità in React Native sono in dp. Se vuoi convertirli in pixel, usa PixelRatio.getPixelSizeForLayoutSize()