當keyboardDismissMode是交互式[react-native]時的動畫視圖高度

Question

我有一個View和鍵盤顯示當我點擊一個輸入，但當我拖下來隱藏鍵盤，動畫沒有觸發調整大小視圖。

與動畫

<Animated.View style={{ height: keyboardSpace }}> 
    <ScrollView 
    ref="addScrollView" 
    keyboardShouldPersistTaps={ true } 
    keyboardDismissMode="interactive" 
    > 
    {...} 
    </ScrollView> 
</Animated.View> 

和功能的視圖來顯示和隱藏鍵盤

_keyboardWillShow(e) { 
    const { keyboardSpace } = this.state; 
    const newHeight = (height - HEADER_HEIGHT) - e.endCoordinates.height; 

    Animated.timing(this.state.keyboardSpace, { 
     easing: Easing.inOut(Easing.ease), 
     duration: 250, 
     toValue: newHeight 
    }).start(); 
    }, 

    _keyboardWillHide() { 
    const { keyboardSpace } = this.state; 

    Animated.timing(keyboardSpace, { 
     easing: Easing.inOut(Easing.ease), 
     duration: 250, 
     toValue: height - HEADER_HEIGHT 
    }).start(); 
    }, 

這裏是一個小的視頻來說明問題就在這裏：https://vid.me/E3oU

你可以找到源代碼在這裏：https://github.com/statiks/statiks-react-native/blob/master/sources/add/index.js

Answer 1

使用Keyboard模塊與keyboardDidShow和keyboardDidHide事件：

import {Keyboard} from 'react-native' 

//... 

componentDidMount() { 
    Keyboard.addListener('keyboardDidShow', this.handleKeyboardShow) 
    Keyboard.addListener('keyboardDidHide', this.handleKeyboardHide) 
}