react-native - props - textinput react native

¿Cómo aumentaría la altura de<TextInput> al ajustar el texto?

Question

<TextInput> crear un <TextInput> que puede crecer en altura cuando el texto se ajusta a la siguiente línea, de forma similar a cómo crece la entrada de mensajes de Slack con el texto hasta un punto.

Tengo el conjunto de utilería multiline , así que está envolviendo, pero los documentos no parecen mencionar ningún evento relacionado con el envoltorio, y lo único que se me ocurre es una estrategia realmente hacky para contar los personajes para averiguar cuándo aumentar la altura del entrada. ¿Cómo podría lograr esto? https://facebook.github.io/react-native/docs/textinput.html

Answer 1

Debería establecer una propiedad maxHeight en el style :

<TextInput multiline style={{maxHeight: 80}} />

Answer 2

Desde React Native 0.46.1 :

La propiedad contentSize se eliminó del evento TextInput.onChange

Si usa esta versión, puede manejar onContentSizeChange prop

De la respuesta de Jérémy , tenemos

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

Answer 3

Gracias a react-native doc: https://facebook.github.io/react-native/docs/textinput.html

Puedes hacer algo como eso:

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

0.46.1 o superior: (según lo explica Nicolas de Chevigné)

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

Answer 4

Mi respuesta es usar onContentSizeChange y numberOfLines props en TextInput, por supuesto activar multiline , esta es mi solución:

let numOfLinesCompany = 0;
<TextInput
     ...
     multiline={true}
     numberOfLines={numOfLinesCompany}
     onContentSizeChange={(e) => {
         numOfLinesCompany = e.nativeEvent.contentSize.height / 18;
     }}
/>

18 es la altura del texto, depende de fontSize