React Native TextInput 在多行时自动增长答案

【问题标题】：React Native TextInput auto grow when multilneReact Native TextInput 在多行时自动增长
【发布时间】：2018-04-27 11:47:36
【问题描述】：

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

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

我怎样才能做到这一点？

【问题讨论】：

标签： react-native

【解决方案1】：

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

这对我有用

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

【讨论】：

如何使用功能组件来做到这一点？
你做一个 'const [text, setText] = React.useState' 然后是 'const onChangeTextHandler = React.useCallback(text => setText(text),[setText])' 然后你做像'onChangeText={onChangeTextHandler}'这样的道具
最后一个道具的'value={text}'

【解决方案2】：

要实现自动增长的多行文本输入，可以根据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

【讨论】：

我尝试了这个解决方案，但 onContentSizeChange 会在初始渲染时触发并为我设置不同的高度。不明白为什么

【解决方案3】：

使用 React Hooks

只是为了补充 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)} />
}

【讨论】：