ios - password - haciendo una multilínea, expandiendo TextInput con React-Native

text input value react native

Question

Estoy trabajando en una aplicación nativa de React y necesito un TextInput que tenga una funcionalidad similar a la vista de texto en la aplicación de "mensajes" en iOS: debería comenzar como una línea y luego expandir con gracia hasta más líneas hasta cierto límite (como 5 líneas de texto) y luego comience a desplazarse a la última línea según sea necesario.

SlackTextViewController un vistazo al SlackTextViewController pero a) parece que tiene muchas cosas que no quiero yb) Me gustaría tratar de mantener tanto código en React (y fuera del objetivo-C / swift) como posible.

Editar: Solo quiero enfatizar que preferiría el código REACT (JAVASCRIPT), como se indicó anteriormente, en lugar de Objective-C o Swift.

Answer 1

A partir de Oct''17 hay un buen componente de Wix para hacer esto:

https://github.com/wix/react-native-autogrow-textinput

El uso puede ser muy simple:

<AutoGrowingTextInput
  style={styles.textInput}
  placeholder="Enter text"
  value={this.state.text}
  onChangeText={this._handleChangeText}
/>

Y hay algunos accesorios adicionales como maxHeight y maxHeight por ejemplo.

Lo estoy usando en RN 0.47.2

Answer 2

Agregar multiline={true} a un TextInput permitirá el desplazamiento si la cantidad de texto excede el espacio disponible. A continuación, puede cambiar la altura de la entrada de texto accediendo a nativeEvent.contentSize.height del evento desde la propiedad onChange.

class Comment extends Component {
   state = {
      text: '''',
      height: 25
   }

   onTextChange(event) {
     const { contentSize, text } = event.nativeEvent;

     this.setState({
        text: text,
        height: contentSize.height > 100 ? 100 : contentSize.height
     }); 
   }

   render() {
      return (
         <TextInput
            multiline
            style={{ height: this.state.height }}
            onChange={this.onTextChange.bind(this)}
            value={this.state.text}
         />
      );
   }
}

Answer 3

Implementar el método delegado de UITextView textViewDidChange y jugar con el rect

- (void)textViewDidChange:(UITextView *)textView {
  CGSize constraintSize = CGSizeMake(textView.frame.size.width, MAXFLOAT);
  CGRect textRect = [textView.text boundingRectWithSize:constraintSize
                                               options:NSStringDrawingUsesLineFragmentOrigin
                                            attributes:@{NSFontAttributeName:textView.font}
                                               context:nil];
  NSLog(@"Frame:%@", NSStringFromCGRect(textRect));
  CGRect newRect = textView.frame;
  newRect.size.height = textRect.size.height;
  textView.frame = newRect;
}

Answer 4

Intenté dos formas diferentes de hacer esto hoy. Ninguno de los dos es el mejor, pero pensé que registraría mis esfuerzos en caso de que fueran útiles. Ambos definitivamente tienen el efecto que estás buscando, aunque en algún momento se retrasó con toda la comunicación asíncrona.

1) Altura del texto sin pantalla

Así que justo debajo de TextInput, agregué un campo de texto regular con la misma fuente y relleno, y tal. onChange oyente onChange en la entrada y llamé a setState({text: event.nativeEvent.text}) . El texto presentado obtuvo su valor del estado. Ambos tenían onLayout Listeners. Básicamente, el objetivo era obtener la altura para el TextInput del texto (no restringido). Luego escondí el texto fuera de pantalla

https://gist.github.com/bleonard/f7d748e89ad2a485ec34

2) Módulo nativo

Realmente, solo necesitaba la altura del contenido en el UITextView real . Así que agregué una categoría a RCTUIManager ya que hay varios métodos que ya son útiles. Me deshice de la vista de texto oculta. Entonces onChange , pido la altura y uso de la misma manera a través del estado.

https://gist.github.com/bleonard/6770fbfe0394a34c864b

3) Github PR

Lo que realmente espero es que este RP sea aceptado. Parece hacer algo como esto automáticamente.

https://github.com/facebook/react-native/pull/1229

Answer 5

Otra solución es verificar ''/n'' símbolos ''/n'' y establecer la propiedad numberOfLines . Funciona para mi.

import React, { Component } from ''react'';
import PropTypes from ''prop-types'';
import {TextInput} from ''react-native'';

export default class TextInputAutogrow extends Component {

    constructor(props) {

        super(props);

        this._ref = null;

        this.bindRef = this.bindRef.bind(this);
        this.onChangeText = this.onChangeText.bind(this);

        this.state = {
            numberOfLines: this.getNumberOfLines()
        };
    }

    bindRef(c) {

        this._ref = c;

        this.props.innerRef && this.props.innerRef(c);
    }

    getText() {

        return typeof this.props.value === ''string'' ?
            this.props.value :
            (
                typeof this.props.defaultValue === ''string'' ?
                    this.props.defaultValue :
                    ''''
            );
    }

    getNumberOfLines(value) {

        if (value === undefined) {

            value = this.getText();
        }

        return Math.max(this.props.numberOfLines, value.split(''/n'').length - 1) + 1;
    }

    onChangeText(value) {

        this.setState({numberOfLines: this.getNumberOfLines(value)})
    }

    render() {

        return (
            <TextInput
                {...this.props}
                ref={this.bindRef}
                numberOfLines={this.state.numberOfLines}
                onChangeText={this.onChangeText}
            />
        )
    }
}

TextInputAutogrow.propTypes = {
    ...TextInput.propTypes,
    innerRef: PropTypes.func,
};

TextInputAutogrow.defaultProps = {
    numberOfLines: 4,
};