React Native TextInput 不会以正确的内容长度增加高度

Posted 2023-04-18

【中文标题】React Native TextInput 不会以正确的内容长度增加高度

【英文标题】：React Native TextInput doesn't increase height at correct content length

【发布时间】：2018-12-22 18:45:44

【问题描述】：

我正在尝试使用 react native 元素和 react native 实现多行扩展文本输入，但我似乎无法使其正常运行。该行为显示在以下屏幕截图中：

这里可以看到，text has 明显不止一行，但是 text input 并没有展开。

每当我再输入几个字符时，它会稍微扩展一点，但会向下扩展至键盘。

添加另一行不会扩展键盘：

直到我添加更多字符，直到最新的行是文本输入宽度的一半，输入才会扩展

这是我用于文本输入的代码：

<View style=flexDirection:'row', backgroundColor: 'transparent', height: Math.max(45, this.state.viewHeight)>
<Input
          containerStyle=marginVertical: 0, width:300, marginLeft: 10
          inputStyle=[styles.textInput, height: Math.max(35, this.state.height)]
          multiline
          enablesReturnKeyAutomatically=true
          keyboardAppearance="dark"
          placeholder=""          
          onContentSizeChange=(event) => 
            if (this.state.height <= (35*6))
            this.setState(
               height: event.nativeEvent.contentSize.height,
              viewHeight: event.nativeEvent.contentSize.height )
            
          
          onChangeText=(message) =>  this.setState(message)
        

这是我的文本输入样式的代码：

textInput: 
      paddingHorizontal: 12,
      width: 100,
      backgroundColor: '#F0F0F0',
      borderStyle: 'solid',
      marginLeft: -4,
      overflow: 'hidden',
      marginTop: 5,
      borderWidth: 1,
      borderColor: 'lightgrey',
      borderRadius: 25,
    ,

似乎内容大小更改事件在错误的时间触发，有什么方法可以将其设置为仅在新行具有特定长度并向上扩展而不是向下扩展到键盘时触发？

【参考方案1】：

我终于让它工作了，我不得不更新到 expo 0.55 React Native sdk，因为我认为他们在 0.54 之后实现了自动增长输入。然后，我不得不从使用 react native 元素输入切换到仅使用 react native 文本输入，因为 RNE 似乎没有实现自动增长。最后我不得不改变我的高度设置，如果你像我一样设置一个确定的高度height: 35它不会增长，所以我不得不使用minheight作为输入和输入所在的视图，这样他们可以一起成长。

【讨论】：

对我来说帮助绝对是'minHeight'，非常感谢