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

Question

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

以下是发生情况的图像:

样式属性如下：

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

有没有一种方法可以强制文本不在 TextInput 中移动？

- ProfessionalAmateur

Answer 1

在 Android 中，TextInput 看起来有一个默认的 paddingBottom 设置，而 iOS 没有，这是因为 Android 有下划线标签，但 iOS 没有。每个平台都有不同的默认填充。

这就是为什么 paddingBottom 或填充值不能正常工作的原因。

请查看以下链接

- Vishal Dhanotiya

Answer 2

请从样式中删除高度属性。

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

我认为这会对你有所帮助

如果你要设置，请将它设置至少40

- Code dragon

---

为什么会改变这些东西呢？如果我删除高度，那么行之间的间距就太大了。但是，如果该字段的高度为28，字体大小为18，为什么还需要滚动？ - ProfessionalAmateur

@ProfessionalAmateur 如果去除高度后UI在不同设备上会发生变化，那么我检查后发现paddingBottom: 0是最好的解决方案。 - Gopal Satpati

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,
  }

- Rajesh N

---

includeFontPadding:false 对我来说非常有用。 - undefined

Answer 4

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

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

希望它能对你有用。

- Sushil