Merge branch 'dev'

Author: ChenlingasMx

packages/core/src/SpeedDial/index.tsx

@@ -146,20 +146,21 @@ function SpeedDial(props: SpeedDialProps) {
         ]}
         // {...panResponder.panHandlers}
       >
-        {children.map((item, i) => (
-          <Animated.View
-            style={[
-              styles.fadingContainer,
-              {
-                // Bind opacity to animated value
-                opacity: fadeAnim[i],
-              },
-            ]}
-            key={i}
-          >
-            <Item {...item} move={panResponder.panHandlers} />
-          </Animated.View>
-        ))}
+        {success &&
+          children.map((item, i) => (
+            <Animated.View
+              style={[
+                styles.fadingContainer,
+                {
+                  // Bind opacity to animated value
+                  opacity: fadeAnim[i],
+                },
+              ]}
+              key={i}
+            >
+              <Item {...item} move={panResponder.panHandlers} />
+            </Animated.View>
+          ))}
 
         <View {...panResponder.panHandlers} style={{ alignItems: 'flex-end' }}>
           <TouchableOpacity activeOpacity={1} onPress={onOpenHome}>

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>

packages/core/src/WingBlank/README.md

@@ -48,7 +48,7 @@ function Demo() {
 export default Demo
 ```
 
-两翼留白不换行
+## 两翼留白不换行
 
 ```jsx mdx:preview&background=#bebebe29
 import React,{Component,Fragment} from 'react';