需求:
1、用AnimatedView制作动画,兼容小程序
2、安卓机不用处理键盘遮挡问题,其会自适应,但是ios不会。需要用以下代码控制
解决:
componentDidMount = ()=>{
// 添加键盘监听
if (Platform.OS === 'ios') {
this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardDidShow.bind(this));
this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardDidHide.bind(this));
}
};
_keyboardDidShow(event) {
//避免使用event.startCoordinates,因为初次和后期获取高度不一样,导致显示问题。所以尽量用endCoordinates
this.handleKeyboardAvoidAnim(this.duration, event.endCoordinates.height);
}
_keyboardDidHide(event) {
this.handleKeyboardAvoidAnim(this.duration, 0);
}
//动画
handleKeyboardAvoidAnim(duration, y) {
if (Platform.OS === 'ios') {
y = y - JDNativeSystem.iphoneXMarginBottom
}
let toValue = - bottomMargin - y;
let animationTran = createAnimation({
duration: duration,
timingFunction: 'ease',
});
animationTran.translateY(toValue).step();
this.setState({
animationTranslateY: animationTran.export(),
})
}
//页面渲染
<AnimatedView animation={this.state.animationTranslateY}></AnimatedView>