テキスト入力の高さ値をアニメ化する

Question

私は、アプリケーションで編集可能なドキュメントを表示するためにreact-native-autogrow-textinputを使用しています。私は現在、テキスト入力ボックスの高さを調整するためにキーボードを回避しようとしているので、すべてのテキストが見えるようになっています。キーボードがスライドを終了した刚性、TextInputコントロールの高さは同じまま、キーボードは画面をオフにアニメーション化されている場合let newSize = Dimensions.get('window').height- e.endCoordinates.height - 150：そう

componentWillMount() { 
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this)); 
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide.bind(this)); 
} 

componentWillUnmount() { 
    this.keyboardDidShowListener.remove(); 
    this.keyboardDidHideListener.remove(); 
} 

keyboardDidShow(e){ 
    let newSize = Dimensions.get('window').height- e.endCoordinates.height - 150; 
    console.log(e.endCoordinates); 
    this.setState({docViewHeight: newSize}); 
} 

keyboardDidHide(e){ 
    let newSize = Dimensions.get('window').height - 170; 
    this.setState({docViewHeight: newSize}) 
} 

を行うには、次のコードは、しかし、私は取得しています結果は私を発見しましたオフスクリーン。

新しい高さに「飛び散らす」ことを除いて、画面全体を再び満たすように高さが調整されます。この高さの値を徐々に増やすにはどうすればよいのですか？単に画面全体に合わせて拡大するように見えますか？私のAutogrow TextInputコードも以下のように投稿してください。どんな助けでも大歓迎です。

<AutoGrowingTextInput 
        ref="editText" 
        editable = {this.state.editting} 
        style = {{fontSize: fontProperties.fontSize+3, marginLeft: 18, marginRight: 18, marginTop: 15}} 
/*animate this*/ minHeight = {this.state.docViewHeight} 
        animation = {{animated: true, duration: 300}} 
        //has some other confidential props here for onChange etc 
</AutoGrowingTextInput> 

Answer 1

いくつかのライブラリファイルを掘り下げて答えを見つけました。

解決策はkeyboardDidHideの代わりにkeyboardWillHideイベントリスナーを使用することです。

キーボードがアウトロアニメーションを開始する前に起動します。私は以下のコードを入れました。

componentWillMount() { 
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this)); 
    this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide.bind(this)); 
} 

componentWillUnmount() { 
    this.keyboardDidShowListener.remove(); 
    this.keyboardWillHideListener.remove(); 
} 

keyboardWillHide(e){ 
    let newSize = Dimensions.get('window').height - 170; 
    this.setState({docViewHeight: newSize}) 
}