web-dev-qa-db-fra.com

React-Native: Marge avec valeur en pourcentage

J'essaie d'utiliser la valeur de pourcentage pour l'attribut de style de marge sur mon React projet natif, mais il semble réduire la hauteur de l'un de mes composants View. Si je remplace la valeur en pourcentage par une valeur absolue, il n'y a plus de problème et cela fonctionne très bien. Avez-vous essayé d'utiliser la valeur de pourcentage comme marge dans React Native? Voici un petit exemple de code pour reproduire ce problème:

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.scene}>
        <View style={styles.card}>
          <View style={styles.container}>
            <Text>Hello World</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    scene: {
        backgroundColor: '#F9E8D5',
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        flexDirection: 'column'
    },
    card: {
        backgroundColor: '#E6D5C3',
        flex: 0.2,
        flexDirection: 'column',
        marginTop: '20%' // Replace by 20
    },
    container: {
        backgroundColor: '#FFFFFF',
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center'
    }
});

Merci beaucoup !

cssreactjsreact-nativeflexboxreact-native-flexbox
7
Thomas Lupo

La hauteur et la largeur d'un composant déterminent sa taille à l'écran.

La façon la plus simple de définir les dimensions d'un composant consiste à ajouter une largeur et une hauteur fixes au style. 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.

Utilisez flex dans le style d'un composant pour le développer et le réduire dynamiquement en fonction de l'espace disponible. Normalement, vous utiliserez flex: 1.

Les références suivantes seront utilisées pour le style

  1. https://facebook.github.io/react-native/docs/height-and-width.html

  2. https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb

  3. https://facebook.github.io/react-native/docs/layout-props.html#paddingtop

    Utilisez Dimensions pour calculer pour obtenir la hauteur et la largeur de l'écran.

    var {height, width} = Dimensions.get('window');

    Pour spécifier un pourcentage en obtenant la taille de l'écran et la convertir en pourcentage.

    Exemple d'échantillon:

    const { height } = Dimensions.get('window');

paddingTop: height * 0.1 // 10 percentage of the screen height
9
Jeeva

C'est un vrai bug mais Facebook s'en fiche.

https://github.com/facebook/react-native/issues/19164

1
Joseph Garrone