三元运算符的异步函数

Question

当我点击主页上的按钮时，我希望它转到另一个页面，但如果它不在主页上，我想旋转按钮内部的图标。我在 touchableWithoutFeedback 的 onPress 中使用三元运算符来执行此操作。当我在不使用三元的情况下编写代码 async()=> handleAnimation() 时，旋转操作有效，但是当我使用三元添加它时却没有。谁能帮忙？

这是我的代码：

import React, { useState } from 'react';
import {
  TouchableWithoutFeedback,
  TouchableWithoutFeedbackProps,
  View,
  Animated,
} from 'react-native';

import { Colors, height, width } from '@utils';
import style from './style';
import Icon from 'react-native-dynamic-vector-icons';
import { useNavigation } from '@react-navigation/native';

export const FloatingButton = (props: Props) => {
  const navigation = useNavigation<any>();
  const { isHome, ...rest } = props;

  const [rotateAnimation, setRotateAnimation] = useState(new Animated.Value(0));

  const goQrScreen = () => navigation.navigate('add-dema-point-screen');

  const handleAnimation = () => {
    Animated.timing(rotateAnimation, {
      toValue: 1,
      duration: 250,
      useNativeDriver: false,
    }).start(() => {
      rotateAnimation.setValue(0);
    });
  };

  const interpolateRotating = rotateAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '-180deg'],
  });

  const animatedStyle = {
    transform: [
      {
        rotate: interpolateRotating,
      },
    ],
  };

  return (
    <View style={style.container}>
      <TouchableWithoutFeedback
        onPress={isHome ? goQrScreen : async () => handleAnimation()}>
        <Animated.View style={animatedStyle}>
          <Icon
            name="pluscircle"
            type="AntDesign"
            color={Colors.brown}
            size={70}
          />
        </Animated.View>
      </TouchableWithoutFeedback>
    </View>
  );
};
interface Props extends TouchableWithoutFeedbackProps {
  isHome?: boolean;
}