fix(Tab): 增加点击动画过度效果

Author: ChenlingasMx

packages/core/src/Tabs/TabsItem.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo } from 'react';
-import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { View, StyleSheet, Text, TouchableOpacity, Animated } from 'react-native';
 
 import Icon, { IconsName } from '../Icon';
 
@@ -42,6 +42,24 @@ export interface TabsItemProps {
 
 function TabsItem(props: TabsItemProps) {
   const { activeColor, icon, index, value, onChange, defaultColor } = props;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (value === index) {
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 500,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [value]);
+
   const style = useCallback(() => {
     const { style = {} } = props;
     const titleBoxStyle = {
@@ -92,7 +110,15 @@ function TabsItem(props: TabsItemProps) {
     if (value === index) {
       return (
         <View style={styles.bottomView}>
-          <View style={[styles.bottom, { ...style().borderColor }]} />
+          <Animated.View
+            style={[
+              styles.bottom,
+              {
+                ...style().borderColor,
+                opacity,
+              },
+            ]}
+          />
         </View>
       );
     }
@@ -102,10 +128,10 @@ function TabsItem(props: TabsItemProps) {
   return (
     <View style={styles.TabsItemContainer}>
       <TouchableOpacity onPress={() => (index === 0 || index) && onChange?.(index)}>
-        {IconDom}
-        <View style={[styles.titleBox, { ...style().titleBoxStyle }]}>
+        <Animated.View style={[styles.titleBox, { ...style().titleBoxStyle }]}>
+          {IconDom}
           <Text style={[styles.title, { ...style().titleStyle }]}>{props.title}</Text>
-        </View>
+        </Animated.View>
         {BorderDom}
       </TouchableOpacity>
     </View>