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

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

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

以下是快速示例代码

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)}
    />
    )
  }

}

OR

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

Answer 2

认为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}
  />

Answer 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)} />
}

当multilne时，React Native TextInput自动增长

3 个答案:

使用React Hooks