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>

标签： css reactjs react-native

【解决方案1】：

参考https://stackoverflow.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://stackoverflow.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，这正是我所需要的。另外，我正在传递填充像“20px”这样的字符串，这是完全错误的。只需要简单的数字，比如 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 存在问题，但尚未修复。

【讨论】：