为什么填充在 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'
}
});
结果：
任何想法为什么？我错过了什么？
使用此填充：
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>
带有 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 存储库存在问题，但尚未修复。
android 的填充问题已在 react-native v0.31.0 版本中修复。有关更多详细信息，您可以转到 react-natvie 发布更新日志https://github.com/facebook/react-native/releases
另一个需要考虑的因素是 flexbox 无处不在。Flexbox 可以从我发现的内容中去除底部填充，因此View可能需要用另一个包装。