@xhsreds/reds-rn-next 0.8.4-fix-callbacks202510011427 → 0.9.0

package/src/components/Sheets/styles.ts

@@ -37,6 +37,17 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
   },
+  leftLabelContainer: {
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    flexDirection: "row",
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+  },
   cancel: {
     fontSize: typography.B1LooseFontSize,
     fontWeight: typography.B1LooseFontWeight,
@@ -79,6 +90,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     flexDirection: "row",
     width: "100%",
+    paddingHorizontal: 56,
   },
   action: {
     flex: 1,

package/src/components/Skeleton/Item/SkeletonItem.tsx

@@ -3,12 +3,19 @@ import { View, Easing, Animated, Text } from "react-native";
 import { RedsSkeletonItem, SkeletonItemDefaultProps } from "./interface/index";
 import createStyles from "./styles";
 import { useThemeColor } from "../../ConfigProvider";
-import Svg, { Defs, LinearGradient, Stop, Rect } from "react-native-svg";
+import Svg, { Defs, LinearGradient, Stop, Rect, ClipPath } from "react-native-svg";
 
 const RectAnimation = Animated.createAnimatedComponent(Rect);
 
 const SkeletonItem = (props: RedsSkeletonItem) => {
-  const { loading, type, animation, containerStyle } = { ...SkeletonItemDefaultProps, ...props };
+  const {
+    loading,
+    type,
+    animation,
+    containerStyle,
+    borderRadius, // 解构新属性
+  } = { ...SkeletonItemDefaultProps, ...props };
+
   const animValue = useRef(new Animated.Value(0)).current;
   const themeColor = useThemeColor();
   const styles = createStyles(type);
@@ -33,7 +40,16 @@ const SkeletonItem = (props: RedsSkeletonItem) => {
 
   return (
     loading && (
-      <Animated.View style={[styles, containerStyle]}>
+      <Animated.View
+        style={[
+          styles,
+          {
+            borderRadius: borderRadius, // 应用 borderRadius
+            overflow: "hidden", // 确保内容不会超出圆角边界
+          },
+          containerStyle,
+        ]}
+      >
         <Svg height="100%" width="100%">
           <Defs>
             <LinearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0%">
@@ -41,8 +57,29 @@ const SkeletonItem = (props: RedsSkeletonItem) => {
               <Stop offset="28%" stopColor={props.color || themeColor.Fill1} stopOpacity={0.15} />
               <Stop offset="35%" stopColor={props.color || themeColor.Fill1} stopOpacity={0.2} />
             </LinearGradient>
+            {/* 如果需要 SVG 内容也遵循圆角，添加 ClipPath */}
+            {borderRadius > 0 && (
+              <ClipPath id="clip">
+                <Rect
+                  x="0"
+                  y="0"
+                  width="100%"
+                  height="100%"
+                  rx={type === "avatar" ? 100 : borderRadius}
+                  ry={type === "avatar" ? 100 : borderRadius}
+                />
+              </ClipPath>
+            )}
           </Defs>
-          <RectAnimation x={interpolatedValue} y="0%" width="400%" height="100%" fill="url(#gradient)" opacity={0.3} />
+          <RectAnimation
+            x={interpolatedValue}
+            y="0%"
+            width="400%"
+            height="100%"
+            fill="url(#gradient)"
+            opacity={0.3}
+            clipPath={borderRadius > 0 ? "url(#clip)" : undefined} // 应用裁剪路径
+          />
         </Svg>
       </Animated.View>
     )

package/src/components/Skeleton/Item/interface/index.ts

@@ -6,10 +6,12 @@ export interface RedsSkeletonItem {
   animation?: boolean;
   loading?: boolean;
   color?: string;
+  borderRadius?: number;
 }
 
 export const SkeletonItemDefaultProps = {
   type: "paragraph",
   animation: true,
   loading: true,
+  borderRadius: 4,
 };

package/src/components/Skeleton/Skeleton.tsx

@@ -9,7 +9,6 @@ const Skeleton = (props: RedsSkeleton) => {
   useMounted("Skeleton");
   const { loading, animation } = { ...SkeletonDefaultProps, ...props };
   const styles = createStyles();
-
   return (
     loading && (
       <>
@@ -33,11 +32,16 @@ const Skeleton = (props: RedsSkeleton) => {
           color={props.color}
         />
         <View style={styles.defaultBottomButton}>
-          <SkeletonItem animation={animation} type="button" containerStyle={{ width: 124 }} color={props.color} />
           <SkeletonItem
             animation={animation}
             type="button"
-            containerStyle={{ flex: 1, marginLeft: 15 }}
+            containerStyle={{ width: 124, borderRadius: 100 }}
+            color={props.color}
+          />
+          <SkeletonItem
+            animation={animation}
+            type="button"
+            containerStyle={{ flex: 1, marginLeft: 15, borderRadius: 100 }}
             color={props.color}
           />
         </View>

package/src/components/Skeleton/demo/button.tsx

@@ -5,8 +5,8 @@ import { SkeletonItem } from "@xhs/reds-rn-next";
 export default function App() {
   return (
     <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
-      <SkeletonItem type="button" containerStyle={{ width: 124 }} />
-      <SkeletonItem type="button" containerStyle={{ flex: 1, marginLeft: 15 }} />
+      <SkeletonItem type="button" containerStyle={{ width: 124, borderRadius: 100 }} />
+      <SkeletonItem type="button" containerStyle={{ flex: 1, marginLeft: 15, borderRadius: 100 }} />
     </View>
   );
 }

package/src/components/StatusBar/hook/getStatusHeight.ts

@@ -162,6 +162,10 @@ export const safeAreaBottomInset = () => {
     return 20;
   }
 
+  if (Platform.OS === "android") {
+    return 20;
+  }
+
   return 0;
 };
 

package/src/components/Tab/Tabs.tsx

@@ -74,7 +74,9 @@ const Tabs = (props: RedsTab) => {
         ? styles.tabLeftContainer
         : props?.layout === TabLayoutType.middle
           ? styles.tabCenterContainer
-          : styles.tabSpaceContainer,
+          : props?.layout === TabLayoutType.space
+            ? styles.tabSpaceContainer
+            : styles.tabRightContainer,
     ];
   }, [props?.layout]);
 
@@ -122,7 +124,7 @@ const Tabs = (props: RedsTab) => {
    * Icon颜色
    */
   const iconColor = (item: TabItemType) => {
-    return props.active === item.value ? item.iconProps?.fill : "";
+    return item.iconProps?.fill;
   };
 
   /**
@@ -157,6 +159,7 @@ const Tabs = (props: RedsTab) => {
         if (!widths.current[index]) {
           widths.current[index] = width;
         }
+
         const scaleWidth = 100 - ((widths.current?.[activeIndex] || 0) - 4);
         const offset = offsets.current[activeIndex];
         scrollRef.current?.scrollTo({
@@ -206,21 +209,21 @@ const Tabs = (props: RedsTab) => {
     <>
       <Wrapper testID="TabContainer">
         <View style={[styles.tabWrapper, props.containerStyle]}>
+          {/* 下划线  */}
+          {props.theme === TabThemeType.underline ? (
+            <Animated.View
+              style={[
+                styles.underline,
+                { width: initialWidth },
+                { opacity: underlineOpacity }, // 控制透明度
+                { transform: [{ translateX: underlineOffset }, { scaleX: underlineScale }] },
+                computedStyle.backgroundColor.primary,
+              ]}
+            ></Animated.View>
+          ) : (
+            <></>
+          )}
           <View style={[...containerStyle]} ref={parentRef}>
-            {/* 下划线  */}
-            {props.theme === TabThemeType.underline ? (
-              <Animated.View
-                style={[
-                  styles.underline,
-                  { width: initialWidth },
-                  { opacity: underlineOpacity }, // 控制透明度
-                  { transform: [{ translateX: underlineOffset }, { scaleX: underlineScale }] },
-                  computedStyle.backgroundColor.primary,
-                ]}
-              ></Animated.View>
-            ) : (
-              <></>
-            )}
             {list.map((item: TabItemType, index: number) => {
               return (
                 <TouchableWithoutFeedback

package/src/components/Tab/doc/index.mdx

@@ -19,7 +19,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | badge           | 是badge类型     | boolean              | false                  |
 | containerStyle  | tab容器样式     | any                  |                        |
 | spaceWidth      | tab间距         | number               | 12                     |
-| tabPadding      | tab padding     | number               | 24                     |
+| tabPadding      | tab padding     | number               | 0                      |
 | active          | 当前激活tab     | string               |                        |
 | children        | tab组件         | ReactNode[]          |                        |
 | key             | key             | string | number |                        |

package/src/components/Tab/interface/index.ts

@@ -33,6 +33,7 @@ export const enum TabLayoutType {
   left = "left",
   middle = "middle",
   space = "space",
+  right = "right",
 }
 export interface RedsTab {
   theme?: TabThemeType;
@@ -60,7 +61,7 @@ export const TabDefaultProps = {
   layout: TabLayoutType.left,
   badge: false,
   spaceWidth: 12,
-  tabPadding: 24,
+  tabPadding: 0,
   active: "",
   contentOffset: 0,
   textStyle: {},

package/src/components/Tab/styles.ts

@@ -23,6 +23,11 @@ const createStyles = (props: RedsTab) => {
       flexDirection: "row",
       justifyContent: "flex-start",
     },
+    tabRightContainer: {
+      flex: 1,
+      flexDirection: "row",
+      justifyContent: "flex-end",
+    },
     tabSpaceContainer: {
       width: "100%",
       flexDirection: "row",
@@ -40,7 +45,7 @@ const createStyles = (props: RedsTab) => {
       borderRadius: 2,
       paddingHorizontal: 2,
       position: "absolute",
-      bottom: -2,
+      bottom: 8,
     },
     capsule: {
       borderRadius: 25,

package/src/components/TabBar/TabBar.tsx

@@ -9,7 +9,7 @@ import useMounted from "../../pvCount/useUnmountedProcess";
 /**
  * 默认icon大小
  */
-const defaultIconSize = 20;
+const defaultIconSize = 24;
 
 const TabBar = (props: RedsTabBar) => {
   const styles = createStyles();
@@ -74,7 +74,9 @@ const TabBar = (props: RedsTabBar) => {
   const Wrapper = (wrapperProps: { badgeProps: RedsBadge; children: React.ReactNode }) => {
     return props?.badge ? (
       <View style={styles.badgeWrapper}>
-        <Badge {...wrapperProps.badgeProps}>{wrapperProps.children}</Badge>
+        <Badge {...wrapperProps.badgeProps} offset={wrapperProps.badgeProps.dot ? [0, 0] : [10, 0]}>
+          {wrapperProps.children}
+        </Badge>
       </View>
     ) : (
       wrapperProps.children

package/src/components/TabBar/demo/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { View, Text, StyleSheet } from "react-native";
 import { TabBar, TabBarType, useThemeColor } from "@xhs/reds-rn-next";
-import { Add } from "@xhs/reder-icon-svg-ReDs_icon";
+import { Add, CollectB, CollectedF } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const styles = StyleSheet.create({
   container: {
@@ -27,14 +27,20 @@ export default function App() {
     text: "标签",
     key: index,
     activeColor: themeColor.Black,
-    normalColor: themeColor.Fill4,
+    normalColor: themeColor.Title,
   })) as unknown as TabBarType.DataType[];
 
   const iconData = new Array(4).fill(0).map((_, index) => ({
     text: "标签",
     key: index,
     activeColor: themeColor.Black,
-    normalColor: themeColor.Fill4,
+    normalColor: themeColor.Title,
+    iconProps: {
+      icon: CollectB,
+    },
+    activeIconProps: {
+      icon: CollectedF,
+    },
   })) as unknown as TabBarType.DataType[];
 
   const badgeData = [
@@ -42,7 +48,7 @@ export default function App() {
       text: "标签",
       key: "0",
       activeColor: themeColor.Black,
-      normalColor: themeColor.Fill4,
+      normalColor: themeColor.Title,
       badgeProps: {
         content: "NEW",
       },
@@ -51,7 +57,7 @@ export default function App() {
       text: "标签",
       key: "1",
       activeColor: themeColor.Black,
-      normalColor: themeColor.Fill4,
+      normalColor: themeColor.Title,
       badgeProps: {
         content: 88,
       },
@@ -60,7 +66,7 @@ export default function App() {
       text: "标签",
       key: "2",
       activeColor: themeColor.Black,
-      normalColor: themeColor.Fill4,
+      normalColor: themeColor.Title,
       badgeProps: {
         content: "NEW",
         dot: true,
@@ -70,7 +76,7 @@ export default function App() {
       text: "标签",
       key: "3",
       activeColor: themeColor.Black,
-      normalColor: themeColor.Fill4,
+      normalColor: themeColor.Title,
       badgeProps: {
         max: 99,
         content: 798,
@@ -83,10 +89,13 @@ export default function App() {
       text: "标签",
       key: "0",
       iconProps: {
-        icon: Add,
+        icon: CollectB,
+      },
+      activeIconProps: {
+        icon: CollectedF,
       },
       activeColor: themeColor.Black,
-      normalColor: themeColor.Fill4,
+      normalColor: themeColor.Title,
       badgeProps: {
         position: "centerLeft",
         content: "99",
@@ -96,10 +105,13 @@ export default function App() {
       text: "标签",
       key: "1",
       iconProps: {
-        icon: Add,
+        icon: CollectB,
+      },
+      activeIconProps: {
+        icon: CollectedF,
       },
       activeColor: themeColor.Black,
-      normalColor: themeColor.Fill4,
+      normalColor: themeColor.Title,
       badgeProps: {
         offset: [30, -30],
         content: 999,
@@ -109,10 +121,13 @@ export default function App() {
       text: "标签",
       key: "2",
       iconProps: {
-        icon: Add,
+        icon: CollectB,
+      },
+      activeIconProps: {
+        icon: CollectedF,
       },
       activeColor: themeColor.Black,
-      normalColor: themeColor.Fill4,
+      normalColor: themeColor.Title,
       badgeProps: {
         max: 99,
         content: 798,
@@ -122,10 +137,13 @@ export default function App() {
       text: "标签",
       key: "3",
       iconProps: {
-        icon: Add,
+        icon: CollectB,
+      },
+      activeIconProps: {
+        icon: CollectedF,
       },
       activeColor: themeColor.Black,
-      normalColor: themeColor.Fill4,
+      normalColor: themeColor.Title,
       badgeProps: {
         position: "centerRight",
         content: "99",
@@ -154,7 +172,7 @@ export default function App() {
       <TabBar
         list={data}
         active={activeTab1}
-        onChange={(key) => {
+        onChange={(key: any) => {
           setActiveTab1(key);
         }}
         type="text"
@@ -165,7 +183,7 @@ export default function App() {
       <TabBar
         list={iconData}
         active={activeTab2}
-        onChange={(key) => {
+        onChange={(key: any) => {
           setActiveTab2(key);
         }}
         type="icon"
@@ -176,7 +194,7 @@ export default function App() {
       <TabBar
         list={badgeData}
         active={activeTab3}
-        onChange={(key) => {
+        onChange={(key: any) => {
           setActiveTab3(key);
         }}
         type="text"
@@ -188,7 +206,7 @@ export default function App() {
       <TabBar
         list={badgeIconData}
         active={activeTab4}
-        onChange={(key) => {
+        onChange={(key: any) => {
           setActiveTab4(key);
         }}
         type="icon"
@@ -200,7 +218,7 @@ export default function App() {
       <TabBar
         list={iconData}
         active={activeTab5}
-        onChange={(key) => {
+        onChange={(key: any) => {
           setActiveTab5(key);
         }}
         customTabBar={{
@@ -220,7 +238,7 @@ export default function App() {
       <TabBar
         list={customTextData}
         active={activeTab6}
-        onChange={(key) => {
+        onChange={(key: any) => {
           setActiveTab6(key);
         }}
         customTabBar={{

package/src/components/TabBar/styles.ts

@@ -42,13 +42,11 @@ const createStyles = () => {
       fontSize: typography.C3FontSize,
       fontWeight: typography.C3FontWeight,
       opacity: 0.8,
-      marginTop: 4,
     },
     activeIconText: {
       fontSize: typography.C3FontSize,
       fontWeight: typography.T3FontWeight,
       opacity: 1,
-      marginTop: 4,
     },
   });
   return styles;

package/src/components/Tag/Tag.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useImperativeHandle, forwardRef, memo, FunctionComponent } from "react";
 import { View, Text, StyleSheet, GestureResponderEvent, TouchableNativeFeedback } from "react-native";
 import { RedsTag, TagDefaultProps } from "./interface";
-import { lightColor, typography } from "@xhs/reds-token-next";
+import { lightColor, typography, alwaysColor } from "@xhs/reds-token-next";
 import { useThemeColor } from "../ConfigProvider";
 import useMounted from "../../pvCount/useUnmountedProcess";
 
@@ -32,11 +32,11 @@ const getTypeStyles = (themeColor: any) => ({
     borderColor: lightColor.Info,
   },
   ghost: {
-    color: themeColor.White,
-    borderColor: themeColor.White,
+    color: alwaysColor.White,
+    borderColor: alwaysColor.LightParagraph,
     borderWidth: 0.5,
     borderStyle: "solid",
-    backgroundColor: "transparent",
+    backgroundColor: alwaysColor.LightFill3,
   },
 });
 
@@ -72,8 +72,8 @@ const getSizeStyles = (icon: any, afterIcon: any, size: string) => {
     large: {
       fontSize: typography.B2FontSize,
       paddingVertical: 8,
-      paddingLeft: icon ? 12 : 16,
-      paddingRight: afterIcon ? 12 : 16,
+      paddingLeft: icon ? 6 : 8,
+      paddingRight: afterIcon ? 6 : 8,
       borderRadius: 6,
     },
   };

package/src/components/Tag/demo/index.tsx

@@ -86,16 +86,21 @@ export default function App() {
       <View
         style={{
           backgroundColor: themeColor.Fill5,
-          width: 58,
-          height: 28,
+          width: 128,
+          height: 60,
           display: "flex",
           flexDirection: "row",
           justifyContent: "center",
           alignItems: "center",
           borderRadius: 6,
+          gap: 8,
         }}
       >
         <Tag type={"ghost"}>ghost</Tag>
+
+        <Tag type={"ghost"} plain>
+          ghost
+        </Tag>
       </View>
       <Br />
 

package/src/components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import { Text, View, StyleSheet, TouchableWithoutFeedback, TextProps } from "react-native";
+import { Text, View, StyleSheet, TextProps } from "react-native";
 import React, { Children, useCallback, useEffect, useLayoutEffect, useState } from "react";
 import { getRenderText, CloneContainer } from "./hooks";
 import { RedsTextReal, LineInfo, TextLayoutEvent } from "./interface";
@@ -6,7 +6,11 @@ import createStyles from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { useLanguage } from "../LanguageProvider";
 import Viewable from "./Viewable";
+import { Icon } from "../Icon";
+import { ArrowDownM, ArrowUpM } from "@xhs/reder-icon-svg-ReDs_icon";
+import { useThemeColor } from "../ConfigProvider";
 export default (props: RedsTextReal & TextProps) => {
+  const themeColor = useThemeColor();
   useMounted("Text");
   const {
     strikethrough = false,
@@ -111,7 +115,7 @@ export default (props: RedsTextReal & TextProps) => {
     if (expanded && actionShow) {
       setActionText(expandText || expandKey);
       setRenderRows(rows - 1);
-      setLastLineText(lines[rows - 1]?.text + actionText || "");
+      setLastLineText(lines[rows - 1]?.text || "");
     } else {
       setActionText(collapseText || closeKey);
       setRenderRows(lines.length);
@@ -134,17 +138,20 @@ export default (props: RedsTextReal & TextProps) => {
       const {
         nativeEvent: { lines },
       } = e;
-
-      lines.length > rows ? setActionShow(true) : setActionShow(false);
-
       setLines(lines);
-      // 移除克隆的文本容器
-      setCalcFinished(true);
-      setExpanded(true);
     },
     [rows],
   );
 
+  useEffect(() => {
+    // 移除克隆的文本容器
+    if (lines.length > 0) {
+      lines.length > rows ? setActionShow(true) : setActionShow(false);
+      setCalcFinished(true);
+      setExpanded(true);
+    }
+  }, [lines]);
+
   // 非受控功能内部处理展开收起逻辑
   const toggle = () => {
     setExpanded((preValue) => !preValue);
@@ -153,13 +160,29 @@ export default (props: RedsTextReal & TextProps) => {
   return (
     <Viewable {...props.firstDrawFinishedProps} callback={props.onFirstDrawFinished}>
       {!calcFinished && (
-        <CloneContainer text={textContent} textStyle={customStyles.textStyle} onTextLayout={onTextLayout} />
+        <CloneContainer
+          text={isRenderEmoji ? renderText : textContent}
+          isRenderEmoji={isRenderEmoji}
+          textStyle={customStyles.textStyle}
+          onTextLayout={onTextLayout}
+          setLines={setLines}
+        />
       )}
       {/* 渲染除最后一行外的前几行 */}
-      <View>
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          width: "100%",
+          flexWrap: "wrap",
+        }}
+      >
         {lines.map((item, index) => {
           if (index < renderRows) {
-            return (
+            return isRenderEmoji ? (
+              item?.text
+            ) : (
               <Text key={index} style={[customStyles.textStyle, { maxHeight: customStyles.textStyle.lineHeight }]}>
                 {item?.text}
               </Text>
@@ -170,17 +193,24 @@ export default (props: RedsTextReal & TextProps) => {
         {actionShow && ((!expanded && collapsible) || expanded) && (
           <View style={customStyles.lastLineStyle}>
             <View style={customStyles.lastLineTextWrapperStyle}>
-              <Text numberOfLines={1} style={customStyles.textStyle} ellipsizeMode={"tail"}>
-                {lastLineText}
-              </Text>
+              {isRenderEmoji ? (
+                lastLineText
+              ) : (
+                <Text numberOfLines={1} style={customStyles.textStyle} ellipsizeMode={"tail"}>
+                  {lastLineText}
+                </Text>
+              )}
               {expanded && <Text style={customStyles.textStyle}>{lastCustomText ? lastCustomText : ""}</Text>}
             </View>
             {/* 渲染展开收起按钮 */}
             <View style={customStyles.actionStyle}>
               {((expanded && expandable) || (!expanded && collapsible)) && (
-                <Text style={customStyles.actionTextStyle} onPress={toggle}>
-                  {actionText}
-                </Text>
+                <>
+                  <Text style={customStyles.actionTextStyle} onPress={toggle}>
+                    {actionText}
+                  </Text>
+                  <Icon onClick={toggle} icon={expanded ? ArrowDownM : ArrowUpM} size={16} fill={themeColor.Title} />
+                </>
               )}
             </View>
           </View>