は、マルチラインtextInputの初期サイズをコンテンツサイズに基づいて設定します。

Question

私のコンポーネントには複数行のtextInputがあり、状態に基づいて初期値を設定します。

ラップされたテキストの高さに基づいてフィールドの高さを正しく調整するイベントハンドラを設定しました。onChangeしかし、フィールドに手動で入力するときにのみ呼び出されます。

私はtextFieldから計算されたコンテンツの高さを最初のテキストで取得する方法を理解したいと思います。

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

注：RN 0.38同じスタイルプロパティを定期的にText要素を作り、TextInputの高さを設定するために、そのonLayoutコールバックを使用することによって解決

Answer 1

で壊れているように見えるようonContentSizeChangeが使用されていません。適切に整列させるためにいくつかのパディング調整が必要でした。

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