2016-02-11 85 views
0

我有一个View和键盘显示当我点击一个输入,但当我拖下来隐藏键盘,动画没有触发调整大小视图。当keyboardDismissMode是交互式[react-native]时的动画视图高度

与动画

<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

回答

0

使用Keyboard模块与keyboardDidShowkeyboardDidHide事件:

import {Keyboard} from 'react-native' 

//... 

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