為什么填充在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 !== undefined ? b : a,
    paddingBottom: c !== undefined ? c : a,
    paddingLeft: d !== undefined ? d : (b !== undefined ? 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版本中得到修復。 要了解更多細節，你可以去https://github.com/facebook/react-native/releases

另一個需要考慮的因素是flexbox正被廣泛使用。Flexbox可以從我發現的內容中去掉底部填充，因此在另一個視圖中包裝可能是必要的。

指的是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,
})

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

在大多數情況下，像上面那樣在前后添加空格對我有幫助。當你有嵌套的“文本”標簽時非常有用。

用這個來填充:

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

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

如果您遇到問題，并且使用邊距不是一個選項，請考慮用Button或其他組件替換View，以便為您解決問題。

我正在使用ReactXp，出于某種原因，使用Styles.createButtonStyle與ReactXP的按鈕一起工作，而Styles.createViewStyle與View不工作。

react native中的填充只接受數字，不接受任何其他字符。

例如:

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

我有解決你問題的辦法。試試這個:

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