web-dev-qa-db-ja.com

React Native-なぜパディングが機能しないのですか？

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'
    }
});

結果： enter image description here

なぜアイデアがありますか？私は何か見落としてますか？

cssreactjsreact-native
9
laukok

Androidのパディングの問題は、react-native v0.31.0バージョンで修正されました。詳細については、react-natvieリリースの変更ログにアクセスできます https://github.com/facebook/反応ネイティブ/リリース

5
Deepak Sisodiya

AndroidのReact Nativeは、境界線がない限り、パディングを好まない傾向があります。一時的な修正として、「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リポジトリには問題がありますが、まだ修正されていません。

2
Erik Melton

考慮すべきもう1つの要因は、flexboxがあらゆる場所で使用されていることです。 Flexboxは、私が見つけたものから下のパディングを取り除くことができるので、別のViewでラップする必要があるかもしれません。

1
David Sinclair

これをパディングに使用します。

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>
1
gilbert-v

私はあなたの問題の解決策を持っています。これを試して：

<Text>
  <View style={{padding: 20, backgroundColor: 'red'}}>
    <Text style={{color: 'white'}}>Description</Text>
  </View>
</Text>
0
Bach The Vinh
<Text>
{` ${description} `}
</Text>

上記のように前後にスペースを追加すると、ほとんどの場合に役立ちました。 「テキスト」タグをネストしている場合に非常に役立ちます。

0
Muhammad Riyaz

これをパディングに使用します。

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



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