react-native TextInput displays wrong when changin

2020-05-27 11:03发布

问题:

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.

回答1:

Android adds some default padding on top and bottom, you can reset them by adding paddingVertical: 0 to your element' style.