☰

react-native TextInput は Android で高さを変更すると間違って表示されます 質問する

tag-icon • tag-icon android react-native textinput
react-native TextInput は Android で高さを変更すると間違って表示されます 質問する

次のスタイルの TextInput があります。

amountInput: {
  flex: 1,
  backgroundColor: 'rgba(255, 255, 255, 0.1)',
  color: 'rgba(255, 255, 255, 0.9)',
},

iOS では、パディングが十分でないように見えます。

ここに画像の説明を入力してください

Android ではデフォルトで非常に大きなパディングがあります。

ここに画像の説明を入力してください

問題ありません。右と左のパディングと高さを設定します。

amountInput: {
  flex: 1,
  backgroundColor: 'rgba(255, 255, 255, 0.1)',
  height: 30,
  paddingRight: 5,
  paddingLeft: 5,
  color: 'rgba(255, 255, 255, 0.9)',
}

iOS では見栄えが良い:

ここに画像の説明を入力してください

しかし、Android は失敗します:

ここに画像の説明を入力してください

最後から 2 番目の iOS スクリーンショットのような Android 入力ボックスを作成するにはどうすればよいでしょうか? ありがとうございます。

ベストアンサー1

paddingVertical: 0Android では上部と下部にデフォルトのパディングが追加されますが、要素のスタイルに追加することでそれらをリセットできます。

おすすめ記事