我们如何在反应原生版本 .61 中将动画添加到底部选项卡图标

Posted 2023-03-15

【中文标题】我们如何在反应原生版本 .61 中将动画添加到底部选项卡图标

【英文标题】：How can we add animation to the bottom tab icon in react native version .61

【发布时间】：2020-02-11 11:01:20

【问题描述】：

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

【参考方案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;

【讨论】：

创建这个组件并添加到底部菜单栏

请在您的代码中添加一些解释，以便其他人可以从中学习