React Native - why padding does not work?

问题:

Why padding never works in React Native? I have 10px padding in the image and the text box below:

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

Result:

Any ideas why? Did I miss something?

回答1:

Use this for padding:

function padding(a, b, c, d) {
  return {
    paddingTop: a,
    paddingRight: b ? b : a,
    paddingBottom: c ? c : a,
    paddingLeft: d ? d : (b ? b : a)
  }
}

In practice

<Text style={{[...], color: "black", ...padding(10, 20, 10, 5)}}>Some text</Text>

回答2:

padding issue for android is fixed in react-native v0.31.0 version. for more details you can go to react-natvie release changelog https://github.com/facebook/react-native/releases

回答3:

Android with React Native tends to not like padding, unless it has a border. A temporary fix would be to change all of your "paddingXXX" to "marginXXX" to get the approximate styling you want.

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

It's a really bad workaround, but I have yet to see a concise fix to it. As far as I know, there is an issue on the Git repo but hasn't been fixed yet.

回答4:

Another factor to consider is flexbox being used everywhere. Flexbox can take away bottom padding from what I have found, so wrapping in another View might be necessary.

回答5:

I have solution for your problem. Try this:

<Text>
  <View style={{padding: 20, backgroundColor: 'red'}}>
    <Text style={{color: 'white'}}>Description</Text>
  </View>
</Text>

回答6:

<Text>
{` ${description} `}
</Text>

Adding space before and after like above helped me in most cases. Very helpful when you have nested 'Text' tags.

回答7:

Use this for padding:

<View style={styles.textPadding}>
        <Text>balablabla</Text>
 </View>

textPadding: {
        color: '#fff',
        fontSize: 25,
        fontWeight: 'bold',
        backgroundColor: "#FFA679",
        paddingVertical: 20,
        paddingHorizontal: 20,
        textAlign: "center"
    },

回答8:

If You are having issues and using margin is not an option, consider replacing View with Button or some other component that fixes the problem for You.

I am using ReactXP and for some reason, using Styles.createButtonStyle with ReactXp's Button worked, and Styles.createViewStyle with View did not.

回答9:

Padding in react native only accepts a number and not any other character.

Eg:

    <TextInput placeholder="Enter Text" style={{padding: 30}} />

回答10:

Padding in react native only accepts a number and not any other character.

Eg:

    <TextInput placeholder="Enter Text" style={{padding: 30}} />