在 Android 上更改高度时,react-native TextInput 显示错误
react-native TextInput displays wrong when changing height on 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搞砸了:
如何制作一个像倒数第二个iOS截图那样的Android输入框?谢谢。
Android 在顶部和底部添加了一些默认填充,您可以通过将 paddingVertical: 0
添加到您的元素样式来重置它们。
对我来说,这是 Android 中的文本对齐问题。将 textAlignVertical: 'top'
添加到样式中对我来说已修复。
使文本输入在 iOS 和 Android 上看起来相同。给它一个特定的高度,这将覆盖 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搞砸了:
如何制作一个像倒数第二个iOS截图那样的Android输入框?谢谢。
Android 在顶部和底部添加了一些默认填充,您可以通过将 paddingVertical: 0
添加到您的元素样式来重置它们。
对我来说,这是 Android 中的文本对齐问题。将 textAlignVertical: 'top'
添加到样式中对我来说已修复。
使文本输入在 iOS 和 Android 上看起来相同。给它一个特定的高度,这将覆盖 android.
中的默认高度