React Native: perché il padding non funziona?

Question

Perché il padding non funziona mai in React Native? Ho 10px padding a immagine e la casella di testo qui sotto:

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' 
    } 
}); 

Risultato:

Tutte le idee perché? Ho dimenticato qualcosa?

Answer 1

Android con React Native tende a non somigliare al padding, a meno che non abbia un bordo. Una soluzione temporanea sarebbe quella di cambiare tutto il tuo "paddingXXX" in "marginXXX" per ottenere lo styling approssimativo che desideri.

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' 
} 
}); 

È una soluzione davvero pessima, ma non ho ancora trovato una soluzione concisa. Per quanto ne so, c'è un problema sul repository Git ma non è stato ancora risolto.

Answer 2

il problema di riempimento per Android è stato risolto nella versione nativa v0.31.0. per maggiori dettagli si può andare a reagire-natvie release changelog https://github.com/facebook/react-native/releases