在 Android 上更改高度时，react-native TextInput 显示错误

Question

I have a TextInput with the following style:

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

On iOS it correctly looks like it doesn't have enough padding:

On Android is has enormous padding by default:

Not a problem - I'll set a right and left padding, and a height:

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

Looks good on iOS:

But Android messes up:

How can I make an Android input box like the penultimate iOS screenshot? Thanks.

Answer 1

Android 在顶部和底部添加了一些默认填充，您可以通过将paddingVertical: 0添加到元素的样式来重置它们。

Answer 2

For me it was text alignment issue in Android. Adding textAlignVertical: 'top' to the style fixed it for me.

Answer 3

To make the text input look the same on both iOS and Android. Give it a specific height, this will override the default height in android.