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

android的padding问题在react-native v0.31.0版本中得到修复。有关详细信息，您可以访问react-natvie release changelog https://github.com/facebook/react-native/releases

Answer 2

Android与React Native往往不喜欢填充，除非它有边框。临时解决方案是更改所有＆＃34; paddingXXX＆＃34;至＆＃34; marginXXX＆＃34;获得你想要的大致样式。

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

要考虑的另一个因素是flexbox随处可见。 Flexbox可以消除我发现的底部填充，因此可能需要用另一个View包装。

Answer 4

使用此填充：

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={{[...], color: "black", ...padding(10, 20, 10, 5)}}>Some text</Text>

Answer 5

类似于 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,
  };
}

Answer 6

参考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,
})

Answer 7

我有解决您问题的方法。试试这个：

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

Answer 8

<Text>
{` ${description} `}
</Text>

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

Answer 9

使用此填充：

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


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

Answer 10

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

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

Answer 11

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

例如：

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

Answer 12

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

例如：

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

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

12 个答案: