如何停止在按下硬件后退按钮(onKeyDown)时关闭键盘?

时间:2019-04-09 12:12:10

标签: javascript android reactjs react-native

我有一个基于键盘状态运行的动画,并且我希望动画继续进行时不要通过按下硬件后退按钮(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;
  }

0 个答案:

没有答案