当多层时，React Native TextInput自动增长

Question

我想创建一个TextInput，当它有多行时可以自动增长。

 <TextInput
            placeholder="Type Comment"
            value={this.state.comment.value}
            onChangeText={value => this.onChangeComment(value)}
            onPress={() => this.uploadComment()}
            multiline={true}
            maxLength={200}
            numberOfLines={5}
          />

我该如何实现？

Answer 1

认为 React Native 团队在当前版本 (0.59) 中使用multilineprop修复了它。

这对我有用

  <TextInput
    style={{
      width: '90%',
      borderColor: 'gray',
      borderWidth: 1,
      padding: 2,
    }}
    multiline
    onChangeText={text => this.setState({ text })}
    value={this.state.text}
  />

Answer 2

使用反应钩子

只是为了添加 Shivam 的答案，这里是带钩子的版本：

import React, { useState } from 'react'

export default function MyTextInput(props) {
    const [height, setHeight] = useState(42)
    return <TextInput
        style={styles.input, {height: height}}
        onContentSizeChange={e => setHeight(e.nativeEvent.contentSize.height)} />
}

Answer 3

要实现自动增长的多行文本输入，可以根据textInput中的内容大小来调整文本输入的高度。

您可以在TextInput中使用onContentSizeChange属性并调用一个函数来增加/减少输入的高度。

这是快速的示例代码

export default class YourComponent extends Component {

  constructor (props) {
    super(props);
    this.state = {
      newValue: '',
      height: 40
    }
  }

  updateSize = (height) => {
    this.setState({
      height
    });
  }

  render () {
    const {newValue, height} = this.state;

    let newStyle = {
      height
    }

    return (
    <TextInput
      placeholder="Your Placeholder"
      onChangeText={(value) => this.setState({value})}
      style={[newStyle]}
      editable
      multiline
      value={value}
      onContentSizeChange={(e) => this.updateSize(e.nativeEvent.contentSize.height)}
    />
    )
  }

}  

要么

您可能要使用react-native-auto-grow-textinput