React Native TextInput在正确的内容长度下未增加高度

6
我正在尝试使用React Native Elements和React Native实现多行展开文本输入,但似乎无法使其正常运行。以下是其行为的截图:
如您所见,文本明显超过一行,但文本输入框未展开。

enter image description here

每当我输入更多字符时,它会稍微扩展一点,但它会向下扩展到键盘中。

enter image description here

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

enter image description here

只有当我添加更多字符,直到最新一行的宽度为文本输入框宽度的一半时,输入框才会扩展。

enter image description here

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

<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个回答

6

终于搞定了,我必须更新到Expo 0.55 React Native SDK,因为我认为他们在.54之后实现了自动增长输入。然后我不得不从使用React Native Elements输入切换到仅使用React Native文本输入,因为RNE似乎没有实现自动增长。最后,我必须更改我的高度设置,如果像我一样设置一个明确的高度height: {35},它不会增长,所以我不得不同时使用minheight来调整输入和包含输入的视图,以便它们可以共同增长。


1
对我来说,确实有帮助的是'minHeight',非常感谢。 - Ivan Chernykh

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接