上键盘时反应本机动画

时间:2020-10-08 13:52:46

标签: react-native keyboard-events react-animated

打开键盘后,我需要立即向上推视图,这在IOS上有效,但在Android上,我正在以另一种妨碍视图的颜色获得视图的一部分,请查看图像。

我该如何解决?

下面的代码:

const [keyboardAnimation, setKeyboardAnimation] = useState(
    new Animated.ValueXY({ x: 0, y: 0 }),
  );


useEffect(() => {
    Keyboard.addListener('keyboardDidShow', _keyboardDidShow);
    Keyboard.addListener('keyboardDidHide', _keyboardDidHide);

    function _keyboardDidShow(event) {
      const keyboardSpace = event.endCoordinates.height;
      const { width, height } = Dimensions.get('window');

      Animated.spring(keyboardAnimation.y, {
        toValue: keyboardSpace - height * 0.63,
        useNativeDriver: true,
        speed: 1,
        bounciness: -10,
      }).start();
    }

    function _keyboardDidHide() {
      Animated.spring(keyboardAnimation.y, {
        toValue: 0,
        useNativeDriver: true,
        speed: 1,
        bounciness: -10,
      }).start();
    }

    return () => {
      Keyboard.removeListener('keyboardDidShow', _keyboardDidShow);
      Keyboard.removeListener('keyboardDidHide', _keyboardDidHide);
    };
  }, [keyboardAnimation]);

第二张图片(在IOS上)是结果应该如何

enter image description here

enter image description here

0 个答案:

没有答案