Как я могу вырастить высоту <TextInput> при переносе текста?

Я пытаюсь создать <TextInput>, который может расти по высоте, когда текст переносится на следующую строку, подобно тому, как поток сообщения Slack растет с текстом до точки.

У меня есть набор multiline prop, поэтому он обертывается, но документы, похоже, не упоминают какое-либо событие, связанное с упаковкой, и единственное, что я могу придумать, - это действительно взломанная стратегия подсчета персонажей, чтобы выяснить, когда для увеличения высоты ввода. Как бы я это сделал? https://facebook.github.io/react-native/docs/textinput.html

Ответы

Ответ 1

Благодаря ответному исходному документу https://facebook.github.io/react-native/docs/textinput.html

Вы можете сделать что-то вроде этого:

class AutoExpandingTextInput extends React.Component {
  state: any;

  constructor(props) {
    super(props);
    this.state = {text: '', height: 0};
  }
  render() {
    return (
      <TextInput
        {...this.props}
        multiline={true}
        onChange={(event) => {
          this.setState({
            text: event.nativeEvent.text,
            height: event.nativeEvent.contentSize.height,
          });
        }}
        style={[styles.default, {height: Math.max(35, this.state.height)}]}
        value={this.state.text}
      />
    );
  }
}

Ответ 2

Так как React Native 0.46.1:

свойство contentSize было удалено из события TextInput.onChange

Если вы используете эту версию, вы можете иметь дело с onContentSizeChange prop

Из ответ Jérémy, мы имеем

class AutoExpandingTextInput extends React.Component {

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

  render() {
    return (
      <TextInput
        {...this.props}
        multiline={true}
        onChangeText={(text) => {
            this.setState({ text })
        }}
        onContentSizeChange={(event) => {
            this.setState({ height: event.nativeEvent.contentSize.height })
        }}
        style={[styles.default, {height: Math.max(35, this.state.height)}]}
        value={this.state.text}
      />
    );
  }
}