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

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>

package/src/components/Text/hooks/cloneContainer.tsx

@@ -1,14 +1,18 @@
-import { StyleSheet, View, Text, TextStyle } from "react-native";
-import React, { useRef } from "react";
+import { StyleSheet, View, Text, TextStyle, Dimensions } from "react-native";
+import React, { useRef, useMemo, useState, useEffect } from "react";
 
 export const CloneContainer = ({
   text,
   textStyle,
   onTextLayout,
+  isRenderEmoji,
+  setLines,
 }: {
   text?: string;
   textStyle: TextStyle;
   onTextLayout?: (e: any) => void;
+  isRenderEmoji?: boolean;
+  setLines?: any;
 }) => {
   const containerRef = useRef(null);
 
@@ -17,19 +21,80 @@ export const CloneContainer = ({
       zIndex: -9999,
       top: -9999,
       height: "auto",
+      width: "100%",
       minHeight: "auto",
       maxHeight: "auto",
     },
     text: {
       ...textStyle,
     },
+    view: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      width: "100%",
+      flexWrap: "wrap",
+    },
   });
+  const [lefts, setLefts] = useState<number[]>([]);
+
+  const renderText = useMemo(() => {
+    if (Array.isArray(text)) {
+      const tempText = text.map?.((txt, index) => {
+        return (
+          <Text
+            onLayout={(e) => {
+              const left = e.nativeEvent.layout.x + e.nativeEvent.layout.width;
+              !lefts[index] && (lefts[index] = left) && setLefts([...lefts]);
+            }}
+          >
+            {txt}
+          </Text>
+        );
+      });
+      return tempText;
+    } else {
+      return <Text>{text}</Text>;
+    }
+  }, [text]);
+
+  useEffect(() => {
+    if (Array.isArray(text) && lefts.length === text.length) {
+      let lines: any = [],
+        cur: any[] = [];
+      lefts.forEach((left, index) => {
+        cur.push(typeof text[index] === "string" ? <Text>{text[index]}</Text> : text[index]);
+        if (left > Dimensions.get("screen").width * 0.9) {
+          lines.push({
+            text: React.Children.map([...cur], (child) => {
+              return React.cloneElement(child, {
+                key: index,
+              });
+            }),
+          });
+          cur = [];
+        }
+      });
+      console.log("~~~~~lines", lines.length);
+      // 处理最后一行
+      if (cur.length > 0) {
+        lines.push({
+          text: [...cur],
+        });
+      }
+      setLines(lines);
+    }
+  }, [lefts]);
 
   return (
     <View ref={containerRef} style={styles.container}>
-      <Text onTextLayout={onTextLayout} style={styles.text}>
-        {text}
-      </Text>
+      {isRenderEmoji ? (
+        <View style={styles.view}>{renderText}</View>
+      ) : (
+        <Text onTextLayout={onTextLayout} style={styles.text}>
+          {text}
+        </Text>
+      )}
     </View>
   );
 };

package/src/components/Text/styles.ts

@@ -51,6 +51,9 @@ export default ({
 
   const actionStyle: ViewStyle = {
     marginLeft: 4,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
   };
 
   return StyleSheet.create({

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

@@ -95,12 +95,47 @@ export default function App() {
         clearable
         placeholder="占位符"
         suffix={
-          <Button variant="text" style={{ marginLeft: 12 }}>
+          <Button
+            variant="text"
+            style={{ marginLeft: 12, height: 24, minWidth: "auto", width: "auto", paddingHorizontal: 0 }}
+          >
             按钮
           </Button>
         }
       />
       <Br />
+
+      <Desc>后缀跳转链接</Desc>
+      <TextField
+        modelValue={modelValue}
+        clearable
+        placeholder="占位符"
+        suffix={
+          <Button
+            type="primary"
+            variant="text"
+            style={{ marginLeft: 12, height: 24, minWidth: "auto", width: "auto", paddingHorizontal: 0 }}
+          >
+            按钮
+          </Button>
+        }
+      />
+      <Br />
+
+      <Desc>后缀图片</Desc>
+      <TextField
+        modelValue={modelValue}
+        clearable
+        placeholder="占位符"
+        type="primary"
+        suffix={
+          <Image
+            source={{ uri: "https://fe-platform.xhscdn.com/platform/104101l031ndr1d7flm06d5494g900000000001m2bkj16" }}
+            style={{ height: 24, width: 48 }}
+          />
+        }
+      />
+      <Br />
       <Desc>前缀和后缀</Desc>
       <TextField
         modelValue={modelValue}

package/src/components/TextView/TextView.tsx

@@ -144,7 +144,7 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
       <TextInput
         testID="text-input"
         ref={inputRef}
-        style={[styles.input, { height: rows * 24 }, style]}
+        style={[styles.input, { minHeight: rows * 24, height: "auto" }, style]}
         value={value}
         onChangeText={handleChangeText}
         onFocus={handleFocus}
@@ -155,7 +155,6 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
         multiline
         returnKeyType={props.returnKeyType as any}
         autoFocus={focused}
-        numberOfLines={rows}
         maxLength={maxLength}
         onKeyPress={handleKeyPress}
         onSubmitEditing={props.onSubmitEditing}

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

@@ -23,7 +23,6 @@ export default function App() {
       <TextView
         modelValue={modelValue}
         showCount
-        maxLength={10}
         clearable
         actionLayout={"horizontal"}
         autofocus={true}

package/src/components/TextView/styles.ts

@@ -11,6 +11,7 @@ const createStyles = (disabled: boolean, actionLayout: "horizontal" | "vertical"
       paddingVertical: 12,
       paddingHorizontal: 16,
       backgroundColor: themeColor.Bg,
+      position: "relative",
     },
     container: {
       display: "flex",
@@ -73,6 +74,9 @@ const createStyles = (disabled: boolean, actionLayout: "horizontal" | "vertical"
       marginTop: actionLayout === "vertical" ? 12 : 0,
       justifyContent: "flex-end",
       alignItems: "center",
+      bottom: 12,
+      position: "absolute",
+      right: 12,
     },
   });
   return styles;

package/src/components/Toast/Toast.tsx

@@ -96,7 +96,7 @@ const ToastContainer = (p: RedsToast) => {
             {icon ? (
               icon
             ) : type === ToastBuiltInType.LOADING ? (
-              <ProgressIndicator type="default" strokeColor={colorMode === "light" ? "dark" : "light"} size={48} />
+              <ProgressIndicator type="default" strokeColor={colorMode === "light" ? "dark" : "light"} size={30} />
             ) : type === ToastBuiltInType.ERROR ? (
               <Icon icon={Close} size={48} type={IconType.iconType?.image} />
             ) : type === ToastBuiltInType.PROGRESS ? (