Ios 如何在react原生版本中向底部选项卡图标添加动画。61

如何在react native Navigation中自定义底部选项卡并向其中添加自定义动画。我当前使用的是react native version.61，我只想将动画放在中间选项卡图标中。图标应该跳跃和旋转。我需要它用于ios应用程序。

导入React，{useffect，usetst}来自“React”；
import React, { useEffect, usetst } from "react";
import { Animated, Easing } from "react-native";
import { Ionicons } from "@expo/vector-icons";

function RefreshSpinner() {
  const spinValue = new Animated.Value(0);

  useEffect(() => {
    spin();

    return spinValue.stopAnimation();
  }, [spin]);

  function spin() {
    spinValue.setValue(0);
    Animated.timing(spinValue, {
      toValue: 1,
      duration: 2000,
      easing: Easing.linear,
      useNativeDriver: true
    }).start(() => spin());
  }

  const rotate = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"]
  });

  return (
    <Animated.View style={{ transform: [{ rotate }] }}>
      <Ionicons color="red" name="md-refresh-circle" size={30}></Ionicons>
    </Animated.View>
    //<Ionicons color="red" name="md-refresh-circle" size={30}></Ionicons>
  );`enter code here`
}

export default RefreshSpinner;

从“react native”导入{Animated，Easing}；
从“@expo/vector icons”导入{Ionicons}”；
函数RefreshSpinner（）{
常量spinValue=新的动画值（0）；
useffect（（）=>{
自旋（）；
返回spinValue.stopAnimation（）；
}，[spin]）；
函数自旋（）{
spinValue.setValue（0）；
动画。计时（旋转值{
toValue:1，
期限：2000年，
放松：放松，线性，
useNativeDriver：真的吗
}).开始（（）=>spin（））；
}
常量旋转=spinValue.interpolate({
输入范围：[0，1]，
输出范围：[“0度”、“360度”]
});
返回(
//
)在这里输入代码`
}
导出默认刷新微调器；

创建此组件并添加到底部菜单栏请为您的代码添加一些说明，以便其他人可以从中学习