@xhsreds/reds-rn-next 0.2.7 → 0.2.9

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

@@ -1,21 +1,15 @@
 import React, { useState } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { Tag, Icon } from "@xhs/reds-rn-next";
-import { CancelM } from "@xhs/reder-icon-svg-ReDs_icon";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { Tag, Icon, useThemeColor } from "@xhs/reds-rn-next";
+import { AddM, Close } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
     paddingTop: 100,
-    paddingBottom: 100,
-    overflow: "scroll",
-    // height: 800,
+    paddingBottom: 300,
     marginLeft: 8,
   },
-  scrollView: {
-    backgroundColor: "pink",
-  },
   root: {
     flex: 1,
     backgroundColor: "blue",
@@ -24,6 +18,7 @@ const styles = StyleSheet.create({
     flexDirection: "row", // 水平排列
     justifyContent: "center", // 沿主轴居中
     alignItems: "center", // 沿交叉轴居中
+    width: "100%",
   },
   boxitem: {
     marginRight: 10,
@@ -36,6 +31,7 @@ const Desc = ({ children = "" }) => {
 const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
 
 export default function App() {
+  const themeColor = useThemeColor();
   const [value, setValue] = useState(false);
   const [valueStr, setValueStr] = useState(value.toString());
   const handleClose = (e: any) => setValue((v) => !v);
@@ -43,129 +39,824 @@ export default function App() {
     console.log(v);
     // setValueStr(v.toString());
   };
+
+  const getIconColor = (type = "default") => {
+    const color = {
+      primary: themeColor.Primary,
+      default: themeColor.Paragraph,
+      warning: themeColor.Warning,
+      success: themeColor.Success,
+      info: themeColor.Info,
+      ghost: themeColor.White,
+    };
+    // @ts-expect-error
+    return color[type];
+  };
   return (
-    <View style={styles.container}>
+    <ScrollView style={styles.container}>
       <Desc>默认用法</Desc>
       <Text style={styles.boxitem}>
         <Tag type="primary">666</Tag>
       </Text>
       <Br />
       <Desc>type样式类型</Desc>
+      <View style={styles.box}>
+        <ScrollView horizontal>
+          <Text style={styles.boxitem}>
+            <Tag type="primary">primary</Tag>
+          </Text>
+          <Text style={styles.boxitem}>
+            <Tag type="default">default</Tag>
+          </Text>
+          <Text style={styles.boxitem}>
+            <Tag type="warning">warning</Tag>
+          </Text>
+          <Text style={styles.boxitem}>
+            <Tag type="success">success</Tag>
+          </Text>
+          <Text style={styles.boxitem}>
+            <Tag type="info">info</Tag>
+          </Text>
+        </ScrollView>
+      </View>
+      <Br />
+
+      <Desc>ghost tag</Desc>
+
+      <View
+        style={{
+          backgroundColor: themeColor.Fill5,
+          width: 58,
+          height: 28,
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          borderRadius: 6,
+        }}
+      >
+        <Tag type={"ghost"}>ghost</Tag>
+      </View>
+      <Br />
+
+      <Desc>Size 尺寸类型</Desc>
       <View style={styles.box}>
         <Text style={styles.boxitem}>
-          <Tag type="primary">primary</Tag>
+          <Tag size="mini" type="primary">
+            mini
+          </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag type="default">default</Tag>
+          <Tag size="small" type="primary">
+            small
+          </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag type="warning">warning</Tag>
+          <Tag size="medium" type="primary">
+            medium
+          </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag type="success">success</Tag>
+          <Tag size="large" type="primary">
+            large
+          </Tag>
         </Text>
       </View>
+      <Br />
+
+      <Desc>outline样式</Desc>
       <View style={styles.box}>
         <Text style={styles.boxitem}>
-          <Tag type="info">info</Tag>
+          <Tag plain type="primary" size="mini">
+            mini
+          </Tag>
+        </Text>
+        <Text style={styles.boxitem}>
+          <Tag plain type="primary" size="small">
+            small
+          </Tag>
+        </Text>
+        <Text style={styles.boxitem}>
+          <Tag plain type="primary" size="medium">
+            medium
+          </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag type="ghost">ghost</Tag>
+          <Tag plain type="primary" size="large">
+            large
+          </Tag>
         </Text>
       </View>
-      <Br />
-
-      <Desc>Size 尺寸类型</Desc>
       <View style={styles.box}>
         <Text style={styles.boxitem}>
-          <Tag size="mini" type="primary">
+          <Tag plain type="success" size="mini">
             mini
           </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag size="small" type="primary">
+          <Tag plain type="success" size="small">
             small
           </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag size="medium" type="primary">
+          <Tag plain type="success" size="medium">
             medium
           </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag size="large" type="primary">
+          <Tag plain type="success" size="large">
             large
           </Tag>
         </Text>
       </View>
-      <Br />
-      <Desc>plain 是否为空心</Desc>
       <View style={styles.box}>
         <Text style={styles.boxitem}>
-          <Tag type="primary">plain: false</Tag>
+          <Tag plain type="info" size="mini">
+            mini
+          </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag plain type="primary">
-            plain
+          <Tag plain type="info" size="small">
+            small
           </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag plain type="success">
-            plain
+          <Tag plain type="info" size="medium">
+            medium
           </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag plain>plain</Tag>
+          <Tag plain type="info" size="large">
+            large
+          </Tag>
         </Text>
       </View>
-      <Br />
-      <Desc>shape 标签形状</Desc>
       <View style={styles.box}>
         <Text style={styles.boxitem}>
-          <Tag shape="round" type="primary">
-            round
+          <Tag plain type="warning" size="mini">
+            mini
           </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag shape="mark" type="primary">
-            mark
+          <Tag plain type="warning" size="small">
+            small
           </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag shape="round" plain type="primary">
-            round
+          <Tag plain type="warning" size="medium">
+            medium
           </Tag>
         </Text>
         <Text style={styles.boxitem}>
-          <Tag shape="mark" plain type="primary">
-            mark
+          <Tag plain type="warning" size="large">
+            large
+          </Tag>
+        </Text>
+      </View>
+      <View style={styles.box}>
+        <Text style={styles.boxitem}>
+          <Tag plain size="mini">
+            mini
+          </Tag>
+        </Text>
+        <Text style={styles.boxitem}>
+          <Tag plain size="small">
+            small
+          </Tag>
+        </Text>
+        <Text style={styles.boxitem}>
+          <Tag plain size="medium">
+            medium
           </Tag>
         </Text>
+        <Text style={styles.boxitem}>
+          <Tag plain size="large">
+            large
+          </Tag>
+        </Text>
+      </View>
+      <Br />
+
+      <Desc>icon</Desc>
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="mini" icon={<Icon icon={AddM} size={12} fill={getIconColor("primary")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="small" icon={<Icon icon={AddM} size={12} fill={getIconColor("primary")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="medium" icon={<Icon icon={AddM} size={14} fill={getIconColor("primary")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="large" icon={<Icon icon={AddM} size={16} fill={getIconColor("primary")} />}>
+            tag
+          </Tag>
+        </View>
+      </View>
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="mini" icon={<Icon icon={AddM} size={12} fill={getIconColor("info")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="small" icon={<Icon icon={AddM} size={12} fill={getIconColor("info")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="medium" icon={<Icon icon={AddM} size={14} fill={getIconColor("info")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="large" icon={<Icon icon={AddM} size={16} fill={getIconColor("info")} />}>
+            tag
+          </Tag>
+        </View>
+      </View>
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="mini" icon={<Icon icon={AddM} size={12} fill={getIconColor("success")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="small" icon={<Icon icon={AddM} size={12} fill={getIconColor("success")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="medium" icon={<Icon icon={AddM} size={14} fill={getIconColor("success")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="large" icon={<Icon icon={AddM} size={16} fill={getIconColor("success")} />}>
+            tag
+          </Tag>
+        </View>
+      </View>
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="mini" icon={<Icon icon={AddM} size={12} fill={getIconColor("warning")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="small" icon={<Icon icon={AddM} size={12} fill={getIconColor("warning")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="medium" icon={<Icon icon={AddM} size={14} fill={getIconColor("warning")} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="large" icon={<Icon icon={AddM} size={16} fill={getIconColor("warning")} />}>
+            tag
+          </Tag>
+        </View>
+      </View>
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag size="mini" icon={<Icon icon={AddM} size={12} fill={"#000"} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag size="small" icon={<Icon icon={AddM} size={12} fill={"#000"} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag size="medium" icon={<Icon icon={AddM} size={14} fill={"#000"} />}>
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag size="large" icon={<Icon icon={AddM} size={16} fill={"#000"} />}>
+            tag
+          </Tag>
+        </View>
       </View>
+
       <Br />
-      <Desc> icon</Desc>
+      <Desc>icon + closeIcon</Desc>
       <View style={styles.box}>
         <View style={styles.boxitem}>
-          <Tag type="primary" icon={<Icon icon={CancelM} size={16} fill={"#000"} />}>
+          <Tag
+            type="primary"
+            icon={<Icon icon={AddM} size={12} fill={getIconColor("primary")} />}
+            onClose={handleClose}
+            closeabled
+            size="mini"
+            closeIcon={<Icon icon={Close} size={12} fill={getIconColor("primary")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="primary"
+            icon={<Icon icon={AddM} size={12} fill={getIconColor("primary")} />}
+            onClose={handleClose}
+            closeabled
+            size="small"
+            closeIcon={<Icon icon={Close} size={12} fill={getIconColor("primary")} />}
+          >
             tag
           </Tag>
         </View>
         <View style={styles.boxitem}>
           <Tag
+            type="primary"
+            icon={<Icon icon={AddM} size={14} fill={getIconColor("primary")} />}
             onClose={handleClose}
             closeabled
+            size="medium"
+            closeIcon={<Icon icon={Close} size={14} fill={getIconColor("primary")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
             type="primary"
-            closeIcon={<Icon icon={CancelM} size={16} fill={"#000"} />}
+            icon={<Icon icon={AddM} size={16} fill={getIconColor("primary")} />}
+            onClose={handleClose}
+            closeabled
+            size="large"
+            closeIcon={<Icon icon={Close} size={16} fill={getIconColor("primary")} />}
           >
             tag
           </Tag>
         </View>
       </View>
 
-      <Desc>disabled</Desc>
-      <Tag plain type="primary" disabled>
-        disabled
-      </Tag>
-    </View>
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag
+            type="info"
+            icon={<Icon icon={AddM} size={12} fill={getIconColor("info")} />}
+            onClose={handleClose}
+            closeabled
+            size="mini"
+            closeIcon={<Icon icon={Close} size={12} fill={getIconColor("info")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="info"
+            icon={<Icon icon={AddM} size={12} fill={getIconColor("info")} />}
+            onClose={handleClose}
+            closeabled
+            size="small"
+            closeIcon={<Icon icon={Close} size={12} fill={getIconColor("info")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="info"
+            icon={<Icon icon={AddM} size={14} fill={getIconColor("info")} />}
+            onClose={handleClose}
+            closeabled
+            size="medium"
+            closeIcon={<Icon icon={Close} size={14} fill={getIconColor("info")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="info"
+            icon={<Icon icon={AddM} size={16} fill={getIconColor("info")} />}
+            onClose={handleClose}
+            closeabled
+            size="large"
+            closeIcon={<Icon icon={Close} size={16} fill={getIconColor("info")} />}
+          >
+            tag
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag
+            type="success"
+            icon={<Icon icon={AddM} size={12} fill={getIconColor("success")} />}
+            onClose={handleClose}
+            closeabled
+            size="mini"
+            closeIcon={<Icon icon={Close} size={12} fill={getIconColor("success")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="success"
+            icon={<Icon icon={AddM} size={12} fill={getIconColor("success")} />}
+            onClose={handleClose}
+            closeabled
+            size="small"
+            closeIcon={<Icon icon={Close} size={12} fill={getIconColor("success")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="success"
+            icon={<Icon icon={AddM} size={14} fill={getIconColor("success")} />}
+            onClose={handleClose}
+            closeabled
+            size="medium"
+            closeIcon={<Icon icon={Close} size={14} fill={getIconColor("success")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="success"
+            icon={<Icon icon={AddM} size={16} fill={getIconColor("success")} />}
+            onClose={handleClose}
+            closeabled
+            size="large"
+            closeIcon={<Icon icon={Close} size={16} fill={getIconColor("success")} />}
+          >
+            tag
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag
+            type="warning"
+            icon={<Icon icon={AddM} size={12} fill={getIconColor("warning")} />}
+            onClose={handleClose}
+            closeabled
+            size="mini"
+            closeIcon={<Icon icon={Close} size={12} fill={getIconColor("warning")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="warning"
+            icon={<Icon icon={AddM} size={12} fill={getIconColor("warning")} />}
+            onClose={handleClose}
+            closeabled
+            size="small"
+            closeIcon={<Icon icon={Close} size={12} fill={getIconColor("warning")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="warning"
+            icon={<Icon icon={AddM} size={14} fill={getIconColor("warning")} />}
+            onClose={handleClose}
+            closeabled
+            size="medium"
+            closeIcon={<Icon icon={Close} size={14} fill={getIconColor("warning")} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            type="warning"
+            icon={<Icon icon={AddM} size={16} fill={getIconColor("warning")} />}
+            onClose={handleClose}
+            closeabled
+            size="large"
+            closeIcon={<Icon icon={Close} size={16} fill={getIconColor("warning")} />}
+          >
+            tag
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag
+            icon={<Icon icon={AddM} size={12} fill={"#000"} />}
+            onClose={handleClose}
+            closeabled
+            size="mini"
+            closeIcon={<Icon icon={Close} size={12} fill={"#000"} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            icon={<Icon icon={AddM} size={12} fill={"#000"} />}
+            onClose={handleClose}
+            closeabled
+            size="small"
+            closeIcon={<Icon icon={Close} size={12} fill={"#000"} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            icon={<Icon icon={AddM} size={14} fill={"#000"} />}
+            onClose={handleClose}
+            closeabled
+            size="medium"
+            closeIcon={<Icon icon={Close} size={14} fill={"#000"} />}
+          >
+            tag
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag
+            icon={<Icon icon={AddM} size={16} fill={"#000"} />}
+            onClose={handleClose}
+            closeabled
+            size="large"
+            closeIcon={<Icon icon={Close} size={16} fill={"#000"} />}
+          >
+            tag
+          </Tag>
+        </View>
+      </View>
+
+      <Desc>disabled</Desc>
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="mini" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="small" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="medium" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="large" disabled>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="mini" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="small" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="medium" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="large" disabled>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="mini" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="small" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="medium" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="large" disabled>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="mini" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="small" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="medium" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="large" disabled>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag size="mini" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag size="small" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag size="medium" disabled>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag size="large" disabled>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="mini" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="small" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="medium" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="primary" size="large" disabled plain>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="mini" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="small" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="medium" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="info" size="large" disabled plain>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="mini" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="small" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="medium" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="success" size="large" disabled plain>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="mini" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="small" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="medium" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag type="warning" size="large" disabled plain>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <View style={styles.box}>
+        <View style={styles.boxitem}>
+          <Tag size="mini" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag size="small" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag size="medium" disabled plain>
+            disabled
+          </Tag>
+        </View>
+        <View style={styles.boxitem}>
+          <Tag size="large" disabled plain>
+            disabled
+          </Tag>
+        </View>
+      </View>
+
+      <Desc>shape 标签形状</Desc>
+      <View style={styles.box}>
+        <Text style={styles.boxitem}>
+          <Tag shape="round" type="primary">
+            round
+          </Tag>
+        </Text>
+        <Text style={styles.boxitem}>
+          <Tag shape="mark" type="primary">
+            mark
+          </Tag>
+        </Text>
+        <Text style={styles.boxitem}>
+          <Tag shape="round" plain type="primary">
+            round
+          </Tag>
+        </Text>
+        <Text style={styles.boxitem}>
+          <Tag shape="mark" plain type="primary">
+            mark
+          </Tag>
+        </Text>
+      </View>
+      <Br />
+    </ScrollView>
   );
 }