防止 TextInput 字段中的文本滚动和截断

Question

我的 React-Native 应用程序中有 TextInput 字段，如果不将行高设置为非常大的值，我无法让字段中的文本不滚动并截断文本底部。

这是正在发生的事情的图像：

样式道具如下：

input: {
  height: 28, 
  paddingBottom: 0, 
  fontSize: 18,  
  color: '#000', 
  borderBottomWidth: 1.5,    
},

有什么方法可以强制文本在 TextInput

范围内不移动

Answer 1

请从样式中删除高度属性

input: {
  paddingBottom: 0, 
  fontSize: 18,  
  color: '#000', 
  borderBottomWidth: 1.5,    
},

我想这对你有帮助

如果要设置请至少设置40

Answer 2

android 中的 TextInput 似乎设置了默认的 paddingBottom 而 iOS 没有，因为 android 有下划线标记但 ios 没有。不同的默认值每个平台的填充。

这就是 paddingBottom 或 paddings 无法正常工作的原因。

请检查以下内容link

Answer 3

删除静态高度并设置 paddingVertical : 7 也使用 includeFontPadding:false

这里7是例子，你可以根据自己的选择设置。

示例样式

textInput: {
    borderWidth: 1,
    borderColor: colors.borderColor,
    color: colors.fontPrimary,
    fontSize: 16,
    paddingLeft: 16,
    includeFontPadding:false,
    backgroundColor: colors.white,
    marginHorizontal: 16,
    borderRadius: 5,
    paddingVertical:7,
  }

Answer 4

下面的代码解决了我的问题。

{
  includeFontPadding:false,
  padding: 0,
  margin: 0,
}

希望对你有用。

防止 TextInput 字段中的文本滚动和截断

Prevent Text scrolling and truncation in TextInput field

textinput

react-native

react-native-android