Как мы можем добавить анимацию к значку нижней вкладки в реакции родной версии .61

Question

Как я могу настроить bottomTab в реагирующей нативной Навигации и добавить к ней пользовательскую анимацию. В настоящее время я использую встроенную версию реагирования .61, и я хочу разместить анимацию только в значке средней вкладки. Значок должен прыгать и вращаться. Он нужен для ios приложений.

Answer 1

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;