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

sto*_*314 5 javascript textinput react-native react-native-ios

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

正如你在这里看到的,文本有明显不止一行,但文本输入并没有展开。

在此处输入图片说明

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

在此处输入图片说明

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

在此处输入图片说明

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

在此处输入图片说明

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

<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})
        }}
Run Code Online (Sandbox Code Playgroud)

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

textInput: {
      paddingHorizontal: 12,
      width: 100,
      backgroundColor: '#F0F0F0',
      borderStyle: 'solid',
      marginLeft: -4,
      overflow: 'hidden',
      marginTop: 5,
      borderWidth: 1,
      borderColor: 'lightgrey',
      borderRadius: 25,
    },
Run Code Online (Sandbox Code Playgroud)

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

sto*_*314 6

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