CSS React Native - 为什么填充不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36690207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native - why padding does not work?
提问by laukok
Why padding never works in React Native? I have 10px padding in the image and the text box below:
为什么填充在 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'
}
});
Result:
结果：
Any ideas why? Did I miss something?
任何想法为什么？我错过了什么？
回答by gilbert-v
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>
回答by Deepak Sisodiya
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
android 的填充问题已在 react-native v0.31.0 版本中修复。有关更多详细信息，您可以访问 react-natvie 发布更新日志https://github.com/facebook/react-native/releases
回答by Erik Melton
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.
带有 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'
}
});
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.
这是一个非常糟糕的解决方法，但我还没有看到一个简洁的修复方法。据我所知，Git 存储库存在问题，但尚未修复。
回答by David Sinclair
Another factor to consider is flexbox being used everywhere. Flexbox can take away bottom padding from what I have found, so wrapping in another Viewmight be necessary.
另一个需要考虑的因素是 flexbox 无处不在。Flexbox 可以从我发现的内容中去除底部填充，因此View可能需要用另一个包装。
回答by Bach The Vinh
I have solution for your problem. Try this:
我有你的问题的解决方案。尝试这个：
<Text>
<View style={{padding: 20, backgroundColor: 'red'}}>
<Text style={{color: 'white'}}>Description</Text>
</View>
</Text>
回答by Muhammad Riyaz
<Text>
{` ${description} `}
</Text>
Adding space before and after like above helped me in most cases. Very helpful when you have nested 'Text' tags.
在大多数情况下，像上面一样在前后添加空格对我有帮助。当您嵌套“文本”标签时非常有用。
回答by alpha
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"
},
回答by Aleksandar
If You are having issues and using marginis notan option, consider replacing Viewwith Buttonor some other component that fixes the problem for You.
如果您有问题，使用margin是不是一种选择，考虑更换View用Button或其他一些组件修复您的问题。
I am using ReactXPand for some reason, using Styles.createButtonStylewith ReactXp's Buttonworked, and Styles.createViewStylewith Viewdid not.
我正在使用ReactXP，出于某种原因，Styles.createButtonStyle与 ReactXpButton一起使用有效，而Styles.createViewStyle与View没有一起使用。
回答by Hemant Arora
Padding in react native only accepts a number and not any other character.
react native 中的填充只接受一个数字，而不接受任何其他字符。
Eg:
例如：
<TextInput placeholder="Enter Text" style={{padding: 30}} />
回答by Hemant Arora
Padding in react native only accepts a number and not any other character.
react native 中的填充只接受一个数字，而不接受任何其他字符。
Eg:
例如：
<TextInput placeholder="Enter Text" style={{padding: 30}} />
