web-dev-qa-db-fra.com

Quelle est l'unité de style par défaut dans React Native?

Je contribue à un projet Open Source où je développe la conception de matériaux pour React Native. Je suis bloqué au travail, je ne peux pas apporter certaines améliorations au niveau de l'interface utilisateur avec le rembourrage, l'alignement, etc.,

Ceci est la spécification officielle de conception matérielle pour le tiroir

According to the spec of Material Design

Dans l'image ci-dessus, l'unité [~ # ~] [~ # ~] de mesure est dp .

Mais, dans mon React code natif, je vois qu'il n'y a pas de telles unités mentionnées. Étant donné qu'il s'agit de "réagir natif", je ne sais pas si c'est px ou dp .

J'ai même passé en revue les documents officiels du composant React Native for Style . Je ne vois aucune mention nulle part.

Mon code ressemble à-

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

Pouvez-vous me dire s'il s'agit de pixels ou de dp? Et aussi, est 1px = 1dp?

androidcssreactjsmaterial-designreact-native
29
bozzmob

Je partage quelque peu votre confusion, ne pouvant pas inspecter activement avec une console de développeur comme nous en avons l'habitude dans le navigateur.

Je ne connais pas l'unité "dp", mais d'après ce que je comprends width: 1 s'affiche différemment sur chaque appareil en fonction de la densité de pixels de l'écran (voir lien). Les informations contenues dans la documentation de react-native indiquent que 1 rendrait plus épais sur les écrans à haute densité de pixels. Ce qui semble logique alors que vous avez plus de précision sur les écrans haute densité que vous n'en auriez sur les écrans basse densité et que React-Native vise à être universel afin de ne pas supposer un dpi élevé.

Je crois comprendre que vous pouvez utiliser l'API PixelRatio liée ci-dessous pour calculer les tailles des éléments de détail (pensez aux bordures, aux icônes, etc.), de cette façon, vous pouvez ajuster dynamiquement la taille rendue en fonction de la densité d'écran de l'appareil.

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

16
Mosselman

De la docs :

Toutes les dimensions en React Native sont sans unité et représentent des pixels indépendants de la densité. La définition de dimensions de cette manière est courante pour les composants qui doivent toujours être rendus exactement à la même taille, quelles que soient les dimensions de l'écran.

Alors oui, les unités en React Native sont en dp. Si vous voulez les convertir en pixels, utilisez PixelRatio.getPixelSizeForLayoutSize()

37
Nick

C'est le ratio de pixels que vous devez considérer. pixel représente une valeur absolue. le rapport en pixels est une valeur relative. pour rendre l'écran et les composants de l'application réactifs, vous devez utiliser le rapport en pixels.

j'utilise déjà dans plusieurs applications. et je pense que c'est comme ça qu'il faut faire. J'espère que ça répond à ta question.

4
Niharika Neeraj

D'après ce que je sais, le style javascript que nous utilisons dans react js ou react native utilise des pixels. Le ratio de pixels n'est nécessaire que pour prendre en charge différentes tailles d'écrans d'appareils mobiles.

3
Ranjith Srikanth