web-dev-qa-db-fra.com

React Native - Pourquoi le padding ne fonctionne-t-il pas?

Pourquoi le rembourrage ne fonctionne jamais dans React Native? J'ai 10px padding dans l'image et la zone de texte ci-dessous:

const styles = StyleSheet.create({
    container: {
        marginTop: 75,
        alignItems: 'center'
    },
    image: {
        width: 107,
        height: 165,
        padding: 10,
        backgroundColor:'blue'
    },
    description: {
        padding: 20,
        margin: 10,
        fontSize: 15,
        color: '#656565',
        backgroundColor:'red'
    }
});

Résultat:  enter image description here

Des idées pourquoi? Ai-je manqué quelque chose?

cssreactjsreact-native
8
laukok

le problème de remplissage pour Android est corrigé dans la version v0.31.0 de react-native. Pour plus de détails, vous pouvez aller sur react-natvie release changelog https://github.com/facebook/react-native/releases

3
Deepak Sisodiya

Android avec React Native a tendance à ne pas aimer le rembourrage, à moins qu'il ait une bordure. Un correctif temporaire consisterait à changer tous vos "paddingXXX" en "marginXXX" pour obtenir le style approximatif souhaité.

const styles = StyleSheet.create({
container: {
    marginTop: 75,
    alignItems: 'center'
},
image: {
    width: 107,
    height: 165,
    margin: 10,
    backgroundColor:'blue'
},
description: {
    margin: 30,
    fontSize: 15,
    color: '#656565',
    backgroundColor:'red'
}
});

C'est une très mauvaise solution de contournement, mais je n'ai pas encore vu de solution concise. Autant que je sache, il y a un problème dans le dépôt Git mais il n'a pas encore été résolu.

2
Erik Melton

Un autre facteur à prendre en compte est l'utilisation de la flexbox partout. Flexbox peut enlever le rembourrage du bas de ce que j'ai trouvé, donc il peut être nécessaire d'envelopper une autre View.

1
David Sinclair

J'ai une solution à ton problème. Essaye ça: 

<Text>
  <View style={{padding: 20, backgroundColor: 'red'}}>
    <Text style={{color: 'white'}}>Description</Text>
  </View>
</Text>
0
Bach The Vinh
<Text>
{` ${description} `}
</Text>

Ajouter de l'espace avant et après comme ci-dessus m'a aidé dans la plupart des cas. Très utile lorsque vous avez imbriqué des balises 'Texte'.

0
Muhammad Riyaz