ios - number - ¿Cómo calcular el ancho del texto en un componente TextInput en React Native?

textinput placeholder react native

Question

Intenté hacer que TextInput fuera auto escalado, es decir, el alto de TextInput aumenta a medida que el texto se ajusta a la siguiente línea.

Por lo tanto, estoy tratando de calcular el ancho del texto y compararlo con el ancho del TextInput. Si es mayor que el ancho, la altura de TextInput aumentará.

¿Entonces mi pregunta es cómo calcular el ancho del texto? ¿Hay alguna otra forma de lograr el efecto de autoescalamiento?

¡Gracias!

Answer 1

Actualmente no hay una manera fácil de obtener el ancho del contenido interno de un TextInput .

React Native necesita urgentemente una entrada de texto autosómica como la que describes. Podría usar uno también, así que cuando encuentre tiempo, puedo tratar de escribir uno.

Mientras tanto, aquí hay una solución para lograr lo que describes:

1. Crea tu TextInput con su altura inicial (fija).

2. Cree un elemento <Text> clonado en algún lugar fuera de la pantalla (por ejemplo, use la posición absoluta) con el mismo estilo que TextInput . Esto es fácil de hacer gracias a la naturaleza declarativa del atributo de style de React. Establezca el ancho del mismo ancho que su TextInput .

   • Si su TextInput tiene un ancho de respuesta, es posible que desee mirar onLayout , o measure para obtener el ancho, de lo contrario, hay formas de procesar automáticamente el clon con el mismo ancho (por ejemplo, colóquelo en el mismo contenedor pero fuera de la pantalla).

3. Escriba un controlador onChange para TextInput que: (a) Actualice el clon cada vez que cambie el texto de TextInput (b) Mida la altura del clon (ya que los elementos de <Text> autosize) (c) Textinput la nueva altura del Textinput

Aunque esto es un poco doloroso, solo tienes que escribirlo una vez. Se puede encapsular fácilmente en un componente (por ejemplo) que luego puede reutilizar con impunidad.

Answer 2

Aunque no respondo la pregunta, quiero señalar que el TextInput escalado automático se puede implementar fácilmente en React Native 0.34.

class AutoScaleTextInput extends React.Component {

  constructor() {
    super();

    this.state = {
      inputHeight: 35
    };
  }

  render() {
    return (
      <TextInput
        multiline={true}
        style={{
          height: this.state.inputHeight
        }}
        onContentSizeChange={ this._onTextContentSizeChange }/>
    );
  }

  _onTextContentSizeChange = (event) => {
    this.setState({
      inputHeight: Math.min(event.nativeEvent.contentSize.height, 100)
    });
  }
}

Ver: TextInput # onContentSizeChange

Ejemplo de Expo Snack https://snack.expo.io/HkqE2AhAe