React Native - 为什么填充不起作用？

Question

为什么padding在React Native中不起作用？我在图像和下面的文本框中有10px填充:

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

结果:

有什么想法吗？我错过了什么？

Answer 1

使用此填充：

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

在实践中

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

Answer 2

带有 React Native 的 Android 往往不喜欢填充，除非它有边框。临时解决方法是将所有“paddingXXX”更改为“marginXXX”以获得所需的大致样式。

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

这是一个非常糟糕的解决方法，但我还没有看到一个简洁的修复方法。据我所知，Git 存储库存在问题，但尚未修复。

Answer 3

Android的padding问题已在react-native v0.31.0版本中修复。有关更多详细信息，您可以转到react-natvie发布更改日志https://github.com/facebook/react-native/releases