Come calcolare la larghezza del testo in un componente TextInput in React Native?

Question

Stavo cercando di rendere TextInput scaling automatico, ovvero l'altezza di TextInput aumenta man mano che il testo viene spostato sulla riga successiva.

Quindi sto cercando di calcolare la larghezza del testo e confrontarlo con la larghezza della TextInput. Se è maggiore della larghezza, l'altezza di TextInput aumenterà.

Quindi la mia domanda è come calcolare la larghezza del testo? Esistono altri modi per realizzare l'effetto di ridimensionamento automatico?

Grazie!

Answer 1

Attualmente non esiste un modo semplice per ottenere la larghezza del contenuto interno di un TextInput.

React Native ha un bisogno urgente di un inserimento di testo con autosizing come quello che descrivi. Potrei usarne anche uno, quindi quando trovo il tempo posso provare a scriverne uno.

Nel frattempo, ecco una soluzione per realizzare ciò che si descrive:

1. Creare la TextInput con la sua iniziale di altezza (fissa).

2. Creare un clonato <Text> elemento da qualche parte fuori campo (utilizzare ad esempio posizione assoluta) con lo stesso stile del TextInput. Questo è facile da fare grazie alla natura dichiarativa dell'attributo React style. Imposta la larghezza alla stessa larghezza del tuo TextInput.

   • Se il TextInput ha larghezza reattivo, si consiglia di guardare onLayout, o measure per ottenere la larghezza, altrimenti ci sono modi per rendere automatico il clone con la stessa larghezza (ad esempio posizionarlo nello stesso contenitore, ma fuori campo).

3. scrivere un gestore di onChange per la TextInput che: (a) gli aggiornamenti del clone qualunque momento il testo TextInput cambia (b) misura l'altezza del clone (dal <Text> elementi autosize) (c) imposta la nuova altezza del Textinput

Anche se questa è una specie di dolore, è sufficiente scrivere una volta. Può essere facilmente incapsulato in un componente (ad esempio) che è possibile riutilizzare con impunità.

Answer 2

Sebbene non risponda alla domanda, desidero sottolineare che il ridimensionamento automatico TextInput può essere facilmente implementato in 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) 
    }); 
    } 
} 

See: TextInput#onContentSizeChange

Expo Snack esempio https://snack.expo.io/HkqE2AhAe