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

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { BottomBar, Button } from "@xhs/reds-rn-next";
+import { BottomBar, Button, CheckBox, useThemeColor } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
   container: {
@@ -42,6 +42,7 @@ const Desc = ({ children = "" }) => {
 const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
 
 export default function App() {
+  const themeColor = useThemeColor();
   return (
     <ScrollView>
       <View style={styles.container}>
@@ -55,6 +56,15 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar showTopBorder={true}>
+            <Button type="primary" block size={"xLarge"}>
+              xLarge 按钮
+            </Button>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar showBackground={false}>
             <Button type="primary" block>
@@ -64,6 +74,15 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar showBackground={false}>
+            <Button type="primary" block size={"xLarge"}>
+              xLarge 按钮
+            </Button>
+          </BottomBar>
+        </View>
+        <Br />
+
         <Desc>按钮组</Desc>
         <View style={styles.itemBox}>
           <BottomBar layout="center">
@@ -75,6 +94,18 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout="center">
+            <Button type="primary" size={"xLarge"}>
+              xLarge按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button size={"xLarge"}>xLarge按钮</Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <BottomBar layout="center" fixedToBottom>
           <Button type="primary">按钮</Button>
           <View style={{ marginLeft: 10 }}>
@@ -82,6 +113,15 @@ export default function App() {
           </View>
         </BottomBar>
 
+        <BottomBar layout="center" fixedToBottom>
+          <Button type="primary" size={"xLarge"}>
+            按钮
+          </Button>
+          <View style={{ marginLeft: 10 }}>
+            <Button size={"xLarge"}>按钮</Button>
+          </View>
+        </BottomBar>
+
         <Desc>layout 布局</Desc>
         <View style={styles.itemBox}>
           <BottomBar layout="block">
@@ -93,6 +133,20 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout="block">
+            <Button type="primary" size={"xLarge"}>
+              按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button type="primary" size={"xLarge"}>
+                按钮
+              </Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar layout="center">
             <Button type="primary">按钮</Button>
@@ -103,6 +157,20 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout="center">
+            <Button type="primary" size={"xLarge"}>
+              按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button type="primary" size={"xLarge"}>
+                按钮
+              </Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar layout="right">
             <Button type="primary">按钮</Button>
@@ -113,9 +181,23 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout="right">
+            <Button type="primary" size={"xLarge"}>
+              按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button type="primary" size={"xLarge"}>
+                按钮
+              </Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <Desc>插槽</Desc>
         <View style={styles.itemBox}>
-          <BottomBar left={<Text style={styles.customArea}>自定义区域</Text>}>
+          <BottomBar layout={"right"} left={<Text style={styles.customArea}>自定义区域</Text>}>
             <Button type="primary">按钮</Button>
             <View style={{ marginLeft: 10 }}>
               <Button type="primary">按钮</Button>
@@ -124,12 +206,27 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar layout={"right"} left={<Text style={styles.customArea}>自定义区域</Text>}>
+            <Button type="primary" size={"xLarge"}>
+              按钮
+            </Button>
+            <View style={{ marginLeft: 10 }}>
+              <Button type="primary" size={"xLarge"}>
+                按钮
+              </Button>
+            </View>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar
             showTopBorder={true}
             top={
               <View style={styles.textflex}>
-                <Text>创建课程即代表同意</Text>
+                <CheckBox isControl={false} />
+                <Text style={{ marginLeft: 5, color: themeColor.Description }}>创建课程即代表同意</Text>
                 <Text style={styles.link}>《小红书直播课主播协议》</Text>
               </View>
             }
@@ -141,12 +238,31 @@ export default function App() {
         </View>
         <Br />
 
+        <View style={styles.itemBox}>
+          <BottomBar
+            showTopBorder={true}
+            top={
+              <View style={styles.textflex}>
+                <CheckBox isControl={false} />
+                <Text style={{ marginLeft: 5, color: themeColor.Description }}>创建课程即代表同意</Text>
+                <Text style={styles.link}>《小红书直播课主播协议》</Text>
+              </View>
+            }
+          >
+            <Button type="primary" block size={"xLarge"}>
+              按钮
+            </Button>
+          </BottomBar>
+        </View>
+        <Br />
+
         <View style={styles.itemBox}>
           <BottomBar
             showTopBorder={true}
             bottom={
               <View style={styles.textflex}>
-                <Text>创建课程即代表同意</Text>
+                <CheckBox isControl={false} />
+                <Text style={{ marginLeft: 5, color: themeColor.Description }}>创建课程即代表同意</Text>
                 <Text style={styles.link}>《小红书直播课主播协议》</Text>
               </View>
             }
@@ -156,6 +272,23 @@ export default function App() {
             </Button>
           </BottomBar>
         </View>
+
+        <View style={styles.itemBox}>
+          <BottomBar
+            showTopBorder={true}
+            bottom={
+              <View style={styles.textflex}>
+                <CheckBox isControl={false} />
+                <Text style={{ marginLeft: 5, color: themeColor.Description }}>创建课程即代表同意</Text>
+                <Text style={styles.link}>《小红书直播课主播协议》</Text>
+              </View>
+            }
+          >
+            <Button type="primary" block size={"xLarge"}>
+              按钮
+            </Button>
+          </BottomBar>
+        </View>
       </View>
     </ScrollView>
   );

package/src/components/BottomBar/styles.ts

@@ -23,7 +23,7 @@ export const getStyles = (themeColor: any) => {
       borderTopColor: themeColor.Separator,
     },
     block: {
-      paddingHorizontal: 16,
+      paddingHorizontal: 48,
       justifyContent: "flex-start", // Align to the start for block layout
     },
     center: {
@@ -38,12 +38,12 @@ export const getStyles = (themeColor: any) => {
       width: "50%",
     },
     top: {
-      marginBottom: 8,
+      marginBottom: 18,
       justifyContent: "center",
       alignItems: "center",
     },
     bottom: {
-      marginTop: 8,
+      marginTop: 18,
       justifyContent: "center",
       alignItems: "center",
     },

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

@@ -115,47 +115,37 @@ export default function App() {
         // iconLeft={<Icon icon={Mail} fill={themeColor.Title} size={22} />}
         // iconRight={<Icon icon={Close} fill={themeColor.Title} size={22} />}
       >
-        xLarge 超大 {themeColor.Title}
+        xLarge
       </Button>
 
       <Button onClick={onClick} size="large">
-        large 大
+        large
       </Button>
 
       <Button onClick={onClick} size="medium">
-        medium 中等
+        mid
       </Button>
 
       <Button onClick={onClick} size="small" variant="outline">
-        small 小
+        small
       </Button>
 
       <Button onClick={onClick} size="mini">
-        mini 极小
+        mini
       </Button>
 
       <Button onClick={onClick} size="micro">
-        micro 微型
+        mic
       </Button>
 
       <Button
         onClick={onClick}
         size="xLarge"
         shape="circle"
-        // iconLeft={<Icon icon={Close} fill="black" size={22} />}
+        iconLeft={<Text>🚀</Text>}
         // iconRight={<Icon icon={Close} />}
       ></Button>
 
-      <Button
-        onClick={onClick}
-        size="large"
-        shape="circle"
-        // iconLeft={<Icon icon={Close} size={20} />}
-        // iconRight={<Icon icon={Close} />}
-      >
-        large 大
-      </Button>
-
       <Button onClick={onClick} size="medium" shape="circle" iconLeft={<Text>🚀</Text>} iconRight={<Text>🚀</Text>}>
         中
       </Button>
@@ -185,7 +175,7 @@ export default function App() {
       </Button>
 
       <Button onClick={onClick} variant="ghost">
-        ghost 幽灵
+        ghost
       </Button>
 
       <Button onClick={onClick} variant="outline">
@@ -210,8 +200,8 @@ export default function App() {
         fill 填满 primary
       </Button>
 
-      <Button onClick={onClick} type="primary" variant="ghost">
-        ghost 幽灵 primary
+      <Button onClick={onClick} variant="ghost">
+        ghost
       </Button>
 
       <Button onClick={onClick} type="primary" variant="outline">
@@ -222,6 +212,10 @@ export default function App() {
         text 文本 primary
       </Button>
 
+      <Button onClick={onClick} type="fill" variant="text">
+        text 文本
+      </Button>
+
       <View style={{ ...styles.item, ...styles.block }}>
         <Button onClick={onClick} type="primary" variant="fill" block>
           占满整行

package/src/components/Button/styleMap.ts

@@ -9,6 +9,7 @@ export const getStyles = (props: RedsButton) => {
   return StyleSheet.create({
     button: {
       borderRadius: borderRadius as unknown as number,
+      boxSizing: "border-box",
       ...(props.outlineType === "shadow"
         ? {
             border: "none",
@@ -55,7 +56,7 @@ export const getStyles = (props: RedsButton) => {
         : {}),
     },
     block: {
-      // alignSelf: "stretch",
+      alignSelf: "stretch",
       width: "100%",
     },
   });
@@ -66,7 +67,6 @@ export const getSizeStyles = (props: RedsButton) => {
   const styles = {
     xLarge: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle
           ? { width: 48 }
           : {
@@ -82,13 +82,13 @@ export const getSizeStyles = (props: RedsButton) => {
       text: {
         fontSize: typography.T2FontSize,
         fontWeight: typography.T2FontWeight,
+        textAlign: "center",
       },
     }),
     large: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle
-          ? { width: 40 }
+          ? { width: 44 }
           : {
               minWidth: 96,
               display: "flex",
@@ -100,50 +100,51 @@ export const getSizeStyles = (props: RedsButton) => {
       text: {
         fontSize: typography.T2FontSize,
         fontWeight: typography.T2FontWeight,
+        textAlign: "center",
       },
     }),
     medium: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle ? { width: 36 } : { minWidth: 82, paddingHorizontal: 20 }),
         height: 36,
       },
       text: {
         fontSize: typography.T3FontSize,
         fontWeight: typography.T3FontWeight,
+        textAlign: "center",
       },
     }),
     small: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle ? { width: 28 } : { minWidth: 63, paddingHorizontal: 12 }),
         height: 28,
       },
       text: {
         fontSize: typography.C1FontSize,
         fontWeight: typography.T3FontWeight,
+        textAlign: "center",
       },
     }),
     mini: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle ? { width: 24 } : { minWidth: 52, paddingHorizontal: 8 }),
         height: 24,
       },
       text: {
         fontSize: typography.C2FontSize,
         fontWeight: typography.T3FontWeight,
+        textAlign: "center",
       },
     }),
     micro: StyleSheet.create({
       button: {
-        paddingVertical: 0,
         ...(isCircle ? { width: 20 } : { minWidth: 40, paddingHorizontal: 8 }),
         height: 20,
       },
       text: {
         fontSize: typography.C3FontSize,
         fontWeight: typography.T3FontWeight,
+        textAlign: "center",
       },
     }),
   };
@@ -174,8 +175,8 @@ export const getVariantStyles = (props: RedsButton) => {
     }),
     ghost: StyleSheet.create({
       button: {
-        borderColor: props.type === "primary" ? themeColor.Primary : themeColor.Paragraph,
-        backgroundColor: props.outlineType === "none" ? themeColor.Fill2 : alwaysColor.LightFill2,
+        borderColor: alwaysColor.LightParagraph,
+        backgroundColor: alwaysColor.LightFill2,
       },
       text: {
         color: props.type === "primary" ? themeColor.Primary : themeColor.Paragraph,
@@ -185,7 +186,6 @@ export const getVariantStyles = (props: RedsButton) => {
       button: {
         borderColor: props.type === "primary" ? themeColor.Primary : themeColor.Separator2,
         backgroundColor: "transparent",
-        boxSizing: "border-box",
       },
       text: {
         color: props.type === "primary" ? themeColor.Primary : themeColor.Title,