我有一个基于键盘状态运行的动画,并且我希望动画继续进行时不要通过按下硬件后退按钮(KeyDown)来关闭键盘。怎么做?
我发现键盘可以在滚动方法中持久地使用轻击方法。但是,我找不到能使键盘保留在键盘API中的任何方法。有什么办法可以保持键盘的功能。
backHandler是否具有我可以添加onKeyDownPress的任何事件侦听器?
https://gist.github.com/jozo/d8351ed708e84c5ea0f69e82e585e5c6
export default class InputToolbar extends React.Component {
constructor(props) {
super(props);
this.state = {
position: 'absolute',
showTools: true,
tool1Width: new Animated.Value(80),
tool2Width: new Animated.Value(80),
};
this.handleBackPress = this.handleBackPress.bind(this);
this.keyboardDidShow = this.keyboardDidShow.bind(this);
this.keyboardDidHide = this.keyboardDidHide.bind(this);
}
componentWillMount() {
this.keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
this.keyboardDidShow
);
this.keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
this.keyboardDidHide
);
BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
handleBackPress() {
if (this.state.animating) {
return true;
}
return false;
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
}
keyboardDidShow() {
this.setState({animating: true}, () => {
Animated.parallel(
[
Animated.timing(this.state.tool1Width, {
toValue: 0,
duration: 500,
easing: Easing.ease,
}),
Animated.timing(this.state.tool2Width, {
toValue: 0,
duration: 500,
easing: Easing.back(),
}),
],
{stopTogether: false}
).start(() => {
this.setState({showTools: false, animating: false});
});
});
return true;
}
keyboardDidHide() {
this.setState({showTools: true, animating: true}, () => {
Animated.parallel(
[
Animated.timing(this.state.tool1Width, {
toValue: 80,
duration: 500,
easing: Easing.ease,
}),
Animated.timing(this.state.tool2Width, {
toValue: 80,
duration: 500,
easing: Easing.elastic(),
}),
],
{stopTogether: false}
).start(() => {
this.setState({animating: false});
});
});
return true;
}