@xhsreds/reds-rn-next 0.8.4-image-optimization202510222117 → 0.9.1-beta202510271511

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>

package/src/components/Text/demo/TextCollapsible.tsx

@@ -4,10 +4,10 @@ import { Text } from "@xhs/reds-rn-next";
 export default () => {
   return (
     <>
-      <Text collapsible={false} isEllipsis>
-        文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开
+      <Text collapsible={true} isEllipsis isRenderEmoji>
+        文字是否可以[微笑R][生气R]展开文字是否可以展开文字是否可以展开[微笑R][生气R]文字是否可以[微笑R][生气R]展开文字是否可以展开文字[微笑R][生气R]是否可以[微笑R][生气R]展开文字是[微笑R][生气R]否可以展开[微笑R][生气R]
       </Text>
-      <Text isEllipsis>
+      <Text collapsible={true} isEllipsis>
         文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开文字是否可以展开
       </Text>
     </>

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

@@ -42,7 +42,7 @@ export default () => {
         </RedsText>
       </View>
       <View>
-        <Text style={{ color: "gray" }}>基础用法</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>基础用法</Text>
         <TextBasic />
       </View>
 
@@ -51,51 +51,51 @@ export default () => {
         <TextFontFamily />
       </View>
       <View>
-        <Text style={{ color: "gray" }}>删除线</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>删除线</Text>
         <TextStrikethrough />
       </View>
       <View>
-        <Text style={{ color: "gray" }}>下划线</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>下划线</Text>
         <TextUnderline />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>倾斜角度</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>倾斜角度</Text>
         <TextItalic />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>省略配置默认展示行数</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>省略配置默认展示行数</Text>
         <TextRows />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>是否可展开</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>是否可展开</Text>
         <TextExpandable />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>展开后是否可以重新收起</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>表情展开收起</Text>
         <TextCollapsible />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>定制样式</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>定制样式</Text>
         <TextCustomStyle />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>定制 emoji 样式</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>定制 emoji 样式</Text>
         <TextCustomEmojiStyle />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>全量表情展示</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>全量表情展示</Text>
         <TextBasicEmoji />
       </View>
 
       <View>
-        <Text style={{ color: "gray" }}>小红书表情</Text>
+        <Text style={{ color: "gray", marginVertical: 20 }}>小红书表情</Text>
         <TextXHSemoji />
       </View>
     </ScrollView>