установить начальный размер многострочного текстаInput, основанный на размере содержимого

Question

У меня есть многострочный textInput в моем компоненте, и я устанавливаю начальное значение на основе состояния.

Я установил обработчик события onChange, который правильно регулирует высоту поля в зависимости от высоты обернутого текста. Однако он вызывается только при вводе вручную в поле.

Так что я хотел бы выяснить, как получить вычисленную высоту контента из текстового поля с его исходным текстом.

class MyComponent extends Component { 

    _textInput:any; 

    constructor(props) { 
     this.handleTextInputChange= this.handleTextInputChange.bind(this) 
     this.handleLayout= this.handleLayout.bind(this) 
     this.state.text = "The quick brown fox jumped over the lazy dog" 
    } 

    handleTextInputChange(evt){ 
     // This works, but only fires on manual input 
     const height = Math.max(35, evt.nativeEvent.contentSize.height) 
     this.setState({text: evt.nativeEvent.text, contentHeight:height}) 
    } 

    handleLayout(evt){ 
     // I can't seem to get anything useful from this event 
    } 

    componentDidMount(){ 
     for (key in this._textInput) console.log(key) 
     // I can't get anything useful from the 
     // _textInput object itself either 
    } 

    render() { 

     return(
      <TextInput 
      ref={textInput => (this._textInput = textInput)} 
      multiline={true} 
      onChange={this.handleTextInputChange} 
      onLayout={this.handleLayout} 
      style={{height: this.state.contentHeight}} 
      value={this.state.text} 
      /> 
      ) 
    } 
} 

Примечание: onContentSizeChange не используется, поскольку это, кажется, сломана в RN 0,38

Answer 1

решена путем регулярного Text элемента с теми же свойствами стиля и используя его onLayout обратного вызова, чтобы установить высоту TextInput , Для правильного выравнивания потребовалось несколько дополнений.

Вот соответствующие части:

handleTextLayout(evt){ 
    this.setState({contentHeight:evt.nativeEvent.layout.height+12}) 
} 

handleTextInputChange(evt){ 
this.setState({text: evt.nativeEvent.text}) 
} 

renderTextInput(){ 
    return(
     <View style={{flex:1, flexDirection:"row", flexGrow:1}}> 

     <Text 
     onLayout={this.handleTextLayout} 
     style={ 
      [styles.textInput, {color: "blue", paddingLeft:4, paddingRight:4}] }> 
      {this.state.text} 
      </Text> 

      <TextInput 
      multiline={true} 
      onChange={this.handleTextInputChange} 
      style={[styles.textInput, {position:"absolute", top:0, left:0, right:0,height: this.state.contentHeight} ]} 
      value={this.state.text} 
      /> 
      </View> 
      ) 
} 

Решение было вдохновленные this github issue