android - Android で高さを変更すると、react-native TextInput が正しく表示されない

Question

次のスタイルの 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 入力ボックスを作成するにはどうすればよいですか? ありがとう。

Answer 1

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

Answer 2

テキスト入力が iOS と Android の両方で同じように見えるようにします。特定の高さを指定すると、Android のデフォルトの高さが上書きされます。