1

我有一个基于键盘状态运行的动画,我希望键盘在动画进行时不会被硬件后退按钮(KeyDown)按下而关闭。怎么做?

我发现键盘在可用作滚动视图道具的水龙头方法上持续存在。但是,我找不到任何方法可以使键盘在键盘 API 中保持不变。有没有办法让键盘保持功能。

backHandler 是否有任何我可以添加 onKeyDownPress 的事件侦听器?

在此处输入图像描述

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;
  }

4

0 回答 0