React Native - 为啥填充不起作用？

Posted 2023-03-06

【中文标题】React Native - 为啥填充不起作用？

【英文标题】：React Native - why padding does not work?React Native - 为什么填充不起作用？

【发布时间】：2016-08-09 23:14:24

【问题描述】：

为什么填充在 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'
    
);

结果：

任何想法为什么？我错过了什么吗？

【问题讨论】：

我觉得你可以写 padding:10px;

你不使用 px 反应原生 @Jainam。

不是这样的。你不必写 10px，它只接受一个数字。所以只有10个。而且我认为问题是->您正在尝试在 Text 和 Image 组件上添加填充。据我所知，您只能在 View 组件上放置填充。您是否尝试将您的图像和文本组件包装在具有填充的视图中？我认为它应该像这样工作：<View style=styles.container><View style=padding: 10><Image style=styles.image source=uri: imageURI /></View><View style=padding: 20><Text style=styles.description>description</Text></View></View>

【参考方案1】：

参考https://***.com/a/55724273/12962610回答

改进版：

export const padding = (a, b, c, d) => (
  paddingTop: a,
  paddingRight: b ?? a,
  paddingBottom: c ?? a,
  paddingLeft: d ?? b ?? a,
)

【参考方案2】：

类似于https://***.com/a/55724273，但可以使用默认参数以更简洁的方式完成。

/**
 * Padding utility function that mimics padding syntax in web
 * https://developer.mozilla.org/en-US/docs/Web/CSS/padding
 */
export function padding(
  top: number | string | null,
  right: number | string | null = top,
  bottom: number | string | null = top,
  left: number | string | null = right
) 
  return 
    paddingTop: top ?? undefined,
    paddingRight: right ?? undefined,
    paddingBottom: bottom ?? undefined,
    paddingLeft: left ?? undefined,
  ;

【参考方案3】：

用它来填充：

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>

【讨论】：

很棒的 sn-p，这正是我所需要的。另外，我正在传递填充像“20​​px”这样的字符串，这是完全错误的。只需要简单的数字，比如 20

@laukok 如果你觉得这个有用，请选择它作为答案

【参考方案4】：

react native 中的填充只接受一个数字，而不接受任何其他字符。

例如：

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

【参考方案5】：

React Native 中的填充只接受一个数字，而不接受任何其他字符。

例如：

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

【参考方案6】：

如果您遇到问题并且使用margin 是不是一个选项，请考虑将View 替换为Button 或其他可以为您解决问题的组件。

我正在使用ReactXP，但由于某种原因，将Styles.createButtonStyle 与ReactXp 的Button 一起使用，而Styles.createViewStyle 与View 却没有。

【参考方案7】：

用它来填充：

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

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

【参考方案8】：

<Text>
` $description `
</Text>

在大多数情况下，像上面这样在前后添加空格对我有帮助。嵌套“文本”标签时非常有用。

【参考方案9】：

我有你的问题的解决方案。试试这个：

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

【讨论】：

Text 应该只包含 Text 元素，而不是 Views。

文本不能包含视图元素

【参考方案10】：

另一个需要考虑的因素是 flexbox 无处不在。 Flexbox 可以从我发现的内容中移除底部填充，因此可能需要使用另一个 View 进行包装。

【参考方案11】：

android 的填充问题已在 react-native v0.31.0 版本中修复。 更多细节可以去 react-natvie 发布更新日志https://github.com/facebook/react-native/releases

【讨论】：

很高兴知道这一点。谢谢！

【参考方案12】：

带有 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 repo 存在问题，但尚未修复。