商品

components/Badge.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Icon, useTheme, Text } from "@ui-kitten/components";
+
+export default function Badge(props) {
+    const theme = useTheme();
+
+    const useColor = React.useMemo(() => {
+        if (props.status) {
+            return theme["text-" + props.status + "-color"];
+        } else {
+            return theme["text-danger-color"];
+        }
+    }, [props.status]);
+
+    return (
+        <Text
+            category='label'
+            status={props.status || "danger"}
+            style={[
+                {
+                    borderWidth: 1,
+                    borderRadius: 20,
+                    paddingHorizontal: 3,
+                    borderColor: useColor,
+                },
+                props.style,
+            ]}
+        >
+            {props.children}
+        </Text>
+    );
+}

components/Dialog.js

@@ -3,6 +3,7 @@ import { StyleSheet } from "react-native";
 import { Modal, Card, Text, Button, Layout } from "@ui-kitten/components";
 import { useModel, setModel } from "flooks";
 import dialogModel from "../models/dialogModel";
+import Textarea from "react-native-textarea";
 
 setModel("dialogModel", dialogModel);
 
@@ -48,6 +49,7 @@ export default function Dialog(props) {
     const {
         hideDialog,
         diloadShow,
+        showInfo,
         title,
         cancelLabelText,
         confirmLabelText,
@@ -56,39 +58,92 @@ export default function Dialog(props) {
         cancelCallback,
         bodyText,
         status,
+        isEdit,
+        textAreaInfo,
     } = useModel("dialogModel");
+    const showAllInfo = React.useMemo(() => {
+        if (diloadShow) {
+            console.log({
+                title,
+                cancelLabelText,
+                confirmLabelText,
+                cancelable,
+                confirmCallback,
+                cancelCallback,
+                bodyText,
+                isEdit,
+                status,
+                ...textAreaInfo,
+                ...showInfo,
+            });
+            return {
+                title,
+                cancelLabelText,
+                confirmLabelText,
+                cancelable,
+                confirmCallback,
+                cancelCallback,
+                bodyText,
+                isEdit,
+                status,
+                ...textAreaInfo,
+                ...showInfo,
+            };
+        } else {
+            return {};
+        }
+    }, [showInfo, diloadShow]);
+
+    const [introduction, changeIntroduction] = React.useState();
     return (
         <Modal visible={diloadShow} backdropStyle={styles.backdrop}>
             <Card
                 style={styles.card}
                 appearance='diaogOutline'
                 header={(props) => {
-                    return Header(props, title || tip);
+                    return Header(props, showAllInfo.title || tip);
                 }}
                 footer={(props) => {
                     return Footer(
                         props,
-                        cancelLabelText || cancel,
-                        confirmLabelText || confirm,
-                        cancelable || false,
+                        showAllInfo.cancelLabelText || cancel,
+                        showAllInfo.confirmLabelText || confirm,
+                        showAllInfo.cancelable || false,
                         () => {
                             hideDialog();
-                            if (confirmCallback) {
-                                confirmCallback();
+                            if (showAllInfo.confirmCallback) {
+                                if (showAllInfo.isEdit) {
+                                    showAllInfo.confirmCallback(introduction);
+                                } else {
+                                    showAllInfo.confirmCallback();
+                                }
                             }
                         },
                         () => {
                             hideDialog();
-                            if (cancelCallback) {
-                                cancelCallback();
+                            if (showAllInfo.cancelCallback) {
+                                showAllInfo.cancelCallback();
                             }
                         }
                     );
                 }}
             >
-                <Text {...props} category='p1' status={status || ""}>
-                    {bodyText || "确认删除吗"}
-                </Text>
+                {showAllInfo.isEdit ? (
+                    <Textarea
+                        containerStyle={styles.textareaContainer}
+                        style={styles.textarea}
+                        onChangeText={changeIntroduction}
+                        defaultValue={showAllInfo.defaultValue}
+                        maxLength={showAllInfo.maxLength}
+                        placeholder={showAllInfo.pla}
+                        placeholderTextColor={"#B4B4B4"}
+                        underlineColorAndroid={"transparent"}
+                    />
+                ) : (
+                    <Text {...props} category='p1' status={status || ""}>
+                        {showAllInfo.bodyText || "确认删除吗"}
+                    </Text>
+                )}
             </Card>
         </Modal>
     );
@@ -109,4 +164,19 @@ const styles = StyleSheet.create({
         minWidth: 112,
         marginHorizontal: 10,
     },
+    textareaContainer: {
+        backgroundColor: "#F0F0F0",
+        height: 100,
+        alignSelf: "stretch",
+        width: 250,
+        borderRadius: 4,
+    },
+    textarea: {
+        textAlignVertical: "top", // hack android
+        fontSize: 13,
+        color: "#333",
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        height: 100,
+    },
 });

components/FormInput.js

@@ -195,6 +195,7 @@ const FormInput = React.memo((props) => {
                     openModal={() => {
                         ChangeOpen(true);
                     }}
+                    defaultValue={props.defaultValue}
                 />
             );
         } else if (type == "url") {

components/GoodsCardVertical.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { StyleSheet, Dimensions } from "react-native";
+import {
+    Modal,
+    Card,
+    Text,
+    Button,
+    Layout,
+    Avatar,
+} from "@ui-kitten/components";
+import { useModel } from "flooks";
+
+const width = Dimensions.get("window").width;
+export default function GoodsCard(props) {
+    const { add, remove } = useModel("wordsModel");
+    return (
+        <Card style={styles.card} appearance='goodsCard' direction='vertical'>
+            <Layout style={styles.layout}>
+                <Avatar
+                    style={styles.avatar}
+                    shape='square'
+                    source='https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg'
+                />
+
+                <Layout style={styles.main}>
+                    <Text category='s1' ellipsizeMode='tail' numberOfLines={1}>
+                        原味板烧鸡腿堡麦满分套餐原味板烧鸡腿堡麦满分套餐
+                    </Text>
+                    <Text category='c1' status='info' style={styles.sub}>
+                        月售 9999+
+                    </Text>
+                    <Text category='h6' status='danger' style={styles.price}>
+                        ¥70
+                    </Text>
+                </Layout>
+
+                <Button status='danger' style={styles.remove}>
+                    {remove}
+                </Button>
+            </Layout>
+        </Card>
+    );
+}
+
+const styles = StyleSheet.create({
+    card: {
+        width: (width - 35) / 2,
+    },
+    layout: {
+        // flexDirection: "row",
+    },
+    avatar: {
+        width: (width - 35) / 2,
+        height: (width - 35) / 2,
+    },
+    main: {
+        padding: 6,
+    },
+    butContent: {
+        marginLeft: 6,
+    },
+    fontColor: {
+        color: "#B5B5B5",
+    },
+    price: {
+        marginTop: 5,
+    },
+    sub: {
+        marginTop: 2,
+    },
+    remove: {
+        minHeight: 33,
+        minWidth: 33,
+        position: "absolute",
+        right: 11,
+        bottom: 4,
+    },
+});

components/OpenTime.js

@@ -54,6 +54,7 @@ export default function OpenTime({
     endTime,
     week,
     openModal,
+    defaultValue,
 }) {
     const {
         MON,
@@ -205,7 +206,13 @@ export default function OpenTime({
                 })
                 .join(",");
         }
-    }, [allChecked, checkList]);
+    }, []);
+
+    React.useEffect(() => {
+        if (defaultValue.length > 0) {
+            setShowName(defaultValue);
+        }
+    }, [defaultValue]);
 
     function hideElseShow(key) {
         changeShowTime1(key === 1);
@@ -338,7 +345,6 @@ export default function OpenTime({
                         </Button>
                         <Button
                             style={[styles.btn, { marginLeft: 10 }]}
-                            appearance='outline'
                             disabled={!canSubmit}
                             onPress={() => {
                                 submit(time1Str, time2Str, checkList);

components/TabBarIcon.js

@@ -1,15 +1,19 @@
-import { Ionicons } from '@expo/vector-icons';
-import * as React from 'react';
+import * as React from "react";
+import { Icon, useTheme } from "@ui-kitten/components";
 
-import Colors from '../constants/Colors';
+import Colors from "../constants/Colors";
 
 export default function TabBarIcon(props) {
-  return (
-    <Ionicons
-      name={props.name}
-      size={30}
-      style={{ marginBottom: -3 }}
-      color={props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
-    />
-  );
+    const theme = useTheme();
+    return (
+        <Icon
+            name={props.name}
+            style={{ width: 30, height: 30 }}
+            fill={
+                props.focused
+                    ? theme["color-primary-500"]
+                    : theme["color-basic-600"]
+            }
+        />
+    );
 }

constants/Colors.js

@@ -1,14 +1,14 @@
-const tintColor = '#2f95dc';
+const tintColor = "#FFC21C";
 
 export default {
-  tintColor,
-  tabIconDefault: '#ccc',
-  tabIconSelected: tintColor,
-  tabBar: '#fefefe',
-  errorBackground: 'red',
-  errorText: '#fff',
-  warningBackground: '#EAEB5E',
-  warningText: '#666804',
-  noticeBackground: tintColor,
-  noticeText: '#fff',
+    tintColor,
+    tabIconDefault: "#B4B4B4",
+    tabIconSelected: tintColor,
+    tabBar: "#fff",
+    errorBackground: "red",
+    errorText: "#fff",
+    warningBackground: "#EAEB5E",
+    warningText: "#666804",
+    noticeBackground: tintColor,
+    noticeText: "#fff",
 };

language/zh.js

@@ -65,19 +65,27 @@ export default {
     guide4_title1: "完美！您已经完成了本向导！",
     guide4_title2: "完整的信息您可以在后续陆续添加。祝您轻松赚钱，开心生活",
 
-   
-
     goodsClassificationTitle1: "分类下的商品",
     goodsClassificationTitle2: "已选择的商品",
     goodsClassificationTitle3: "未选择的商品",
 
     storeAudio: "审核店铺",
-    storeAudioText1:"您的店铺正在审核中",
-    storeAudioText2:"请耐心等待...",
-    storeAudioText3:"恭喜!!!",
-    storeAudioText4:"您的店铺审核成功!",
-
+    storeAudioText1: "您的店铺正在审核中",
+    storeAudioText2: "请耐心等待...",
+    storeAudioText3: "恭喜!!!",
+    storeAudioText4: "您的店铺审核成功!",
+    addGoods: "编辑（新增）商品",
 
+    homeBar: "我的店面",
+    homeTip1: "添加banner",
+    homeTitle1: "店主推荐",
+    homeTitle2: "编辑分类",
+    homeTip2: "月售",
+    homeTip3: "公告",
+    homeTitle3: "公告编辑",
+    homeTab1: "点餐",
+    homeTab2: "评价",
+    homeTab3: "商家",
     //公共的文字
 
     changeToEnglish: "切换到泰文",
@@ -106,4 +114,7 @@ export default {
     add: "添加",
     remove: "移除",
     complete: "完成",
+    tab1: "店面",
+    tab2: "订单",
+    tab3: "我的",
 };

mapping.json

@@ -7,7 +7,11 @@
         "text-heading-5-font-size": 18,
         "text-heading-6-font-size": 16,
         "text-subtitle-1-font-weight": "400",
-        "text-subtitle-2-font-weight": "400"
+        "text-subtitle-2-font-weight": "400",
+        "text-label-font-size": 10,
+        "text-label-font-weight": "400",
+        "text-label-font-family": "$text-font-family",
+        "border-radius": 3
     },
     "components": {
         "Avatar": {
@@ -721,6 +725,89 @@
                             }
                         }
                     }
+                },
+                "bannerButton": {
+                    "mapping": {
+                        "textFontFamily": "text-font-family",
+                        "iconMarginHorizontal": 4
+                    },
+                    "variantGroups": {
+                        "status": {
+                            "primary": {
+                                "borderColor": "transparent",
+                                "backgroundColor": "transparent",
+                                "state": {
+                                    "focused": {
+                                        "borderColor": "transparent",
+                                        "backgroundColor": "transparent"
+                                    },
+                                    "hover": {
+                                        "borderColor": "transparent",
+                                        "backgroundColor": "transparent"
+                                    },
+                                    "active": {
+                                        "borderColor": "transparent",
+                                        "backgroundColor": "transparent"
+                                    },
+                                    "disabled": {
+                                        "borderColor": "transparent",
+                                        "backgroundColor": "transparent",
+                                        "textColor": "text-disabled-color",
+                                        "iconTintColor": "text-disabled-color"
+                                    }
+                                }
+                            }
+                        },
+                        "size": {
+                            "medium": {
+                                "minWidth": "100%",
+                                "minHeight": 66
+                            }
+                        }
+                    }
+                },
+                "labelButton": {
+                    "mapping": {
+                        "textFontFamily": "text-font-family",
+                        "iconMarginHorizontal": 4
+                    },
+                    "variantGroups": {
+                        "status": {
+                            "primary": {
+                                "borderColor": "transparent",
+                                "backgroundColor": "transparent",
+                                "textColor": "#787878",
+                                "iconTintColor": "#787878",
+                                "state": {
+                                    "focused": {
+                                        "borderColor": "transparent",
+                                        "backgroundColor": "transparent"
+                                    },
+                                    "hover": {
+                                        "borderColor": "transparent",
+                                        "backgroundColor": "transparent"
+                                    },
+                                    "active": {
+                                        "borderColor": "transparent",
+                                        "backgroundColor": "transparent"
+                                    },
+                                    "disabled": {
+                                        "borderColor": "transparent",
+                                        "backgroundColor": "transparent",
+                                        "textColor": "text-disabled-color",
+                                        "iconTintColor": "text-disabled-color"
+                                    }
+                                }
+                            }
+                        },
+                        "size": {
+                            "medium": {
+                                "minWidth": "100%",
+                                "minHeight": "100%",
+                                "textFontSize": 10
+                            }
+                        }
+                    }
                 }
             }
         },
@@ -773,6 +860,39 @@
                         "default": true
                     }
                 },
+                "variantGroups": {
+                    "status": {
+                        "basic": {
+                            "default": false
+                        },
+                        "primary": {
+                            "default": false
+                        },
+                        "success": {
+                            "default": false
+                        },
+                        "info": {
+                            "default": false
+                        },
+                        "warning": {
+                            "default": false
+                        },
+                        "danger": {
+                            "default": false
+                        },
+                        "control": {
+                            "default": false
+                        }
+                    },
+                    "direction": {
+                        "horizontal": {
+                            "default": true
+                        },
+                        "vertical": {
+                            "default": false
+                        }
+                    }
+                },
                 "states": {
                     "active": {
                         "default": false,
@@ -1036,8 +1156,36 @@
                                 "accentHeight": 4,
                                 "accentBackgroundColor": "color-control-default"
                             }
+                        },
+                        "direction": {
+                            "vertical": {
+                                "bodyPaddingHorizontal": 0,
+                                "bodyPaddingVertical": 0
+                            }
                         }
                     }
+                },
+                "homeCard": {
+                    "mapping": {
+                        "accentHeight": 0,
+                        "bodyPaddingHorizontal": 10,
+                        "bodyPaddingVertical": 10,
+                        "borderRadius": 3,
+                        "headerPaddingVertical": 0,
+                        "footerPaddingVertical": 0
+                    }
+                },
+                "homePage1Card": {
+                    "mapping": {
+                        "accentHeight": 0,
+                        "bodyPaddingHorizontal": 15,
+                        "bodyPaddingVertical": 0,
+                        "borderRadius": 3,
+                        "headerPaddingVertical": 10,
+                        "headerPaddingHorizontal": 15,
+                        "footerPaddingVertical": 5,
+                        "borderWidth": 0
+                    }
                 }
             }
         },
@@ -1241,6 +1389,16 @@
                     "mapping": {
                         "backgroundColor": "transparent"
                     }
+                },
+                "homeBar": {
+                    "mapping": {
+                        "minHeight": 56,
+                        "paddingVertical": 8,
+                        "paddingHorizontal": 8,
+                        "backgroundColor": "#fff",
+                        "titleColor": "#000000",
+                        "iconTintColor": "#000000"
+                    }
                 }
             }
         },
@@ -1449,6 +1607,160 @@
                     }
                 }
             }
+        },
+        "Tab": {
+            "meta": {
+                "scope": "all",
+                "parameters": {
+                    "textFontFamily": {
+                        "type": "string"
+                    },
+                    "textFontSize": {
+                        "type": "number"
+                    },
+                    "textFontWeight": {
+                        "type": "number"
+                    },
+                    "textMarginVertical": {
+                        "type": "number"
+                    },
+                    "textColor": {
+                        "type": "string"
+                    },
+                    "iconWidth": {
+                        "type": "number"
+                    },
+                    "iconHeight": {
+                        "type": "number"
+                    },
+                    "iconMarginVertical": {
+                        "type": "number"
+                    },
+                    "iconTintColor": {
+                        "type": "string"
+                    }
+                },
+                "appearances": {
+                    "default": {
+                        "default": true
+                    }
+                },
+                "variantGroups": {},
+                "states": {
+                    "selected": {
+                        "default": false,
+                        "priority": 0,
+                        "scope": "all"
+                    },
+                    "hover": {
+                        "default": false,
+                        "priority": 1,
+                        "scope": "all"
+                    },
+                    "focused": {
+                        "default": false,
+                        "priority": 2,
+                        "scope": "all"
+                    }
+                }
+            },
+            "appearances": {
+                "default": {
+                    "mapping": {
+                        "textMarginVertical": 2,
+                        "textFontSize": 14,
+                        "textFontWeight": "bold",
+                        "textFontFamily": "text-font-family",
+                        "textColor": "text-hint-color",
+                        "iconWidth": 24,
+                        "iconHeight": 24,
+                        "iconMarginVertical": 2,
+                        "iconTintColor": "text-hint-color",
+                        "state": {
+                            "hover": {
+                                "textColor": "text-primary-hover-color",
+                                "iconTintColor": "text-primary-hover-color"
+                            },
+                            "selected": {
+                                "textColor": "text-primary-color",
+                                "iconTintColor": "text-primary-color"
+                            }
+                        }
+                    }
+                },
+                "homeTab": {
+                    "mapping": {
+                        "textMarginVertical": 5,
+                        "textFontSize": 15,
+                        "textFontWeight": "blod",
+                        "textFontFamily": "text-font-family",
+                        "textColor": "#000",
+                        "iconWidth": 24,
+                        "iconHeight": 24,
+                        "iconMarginVertical": 8,
+                        "iconTintColor": "#000",
+                        "state": {
+                            "hover": {
+                                "textColor": "#000",
+                                "iconTintColor": "text-primary-hover-color"
+                            },
+                            "selected": {
+                                "textColor": "#000",
+                                "iconTintColor": "text-primary-color"
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        "TabBar": {
+            "meta": {
+                "scope": "all",
+                "parameters": {
+                    "paddingVertical": {
+                        "type": "number"
+                    },
+                    "backgroundColor": {
+                        "type": "string"
+                    },
+                    "indicatorHeight": {
+                        "type": "number"
+                    },
+                    "indicatorBorderRadius": {
+                        "type": "number"
+                    },
+                    "indicatorBackgroundColor": {
+                        "type": "string"
+                    }
+                },
+                "appearances": {
+                    "default": {
+                        "default": true
+                    }
+                },
+                "variantGroups": {},
+                "states": {}
+            },
+            "appearances": {
+                "default": {
+                    "mapping": {
+                        "paddingVertical": 4,
+                        "backgroundColor": "background-basic-color-1",
+                        "indicatorHeight": 4,
+                        "indicatorBorderRadius": 2,
+                        "indicatorBackgroundColor": "color-primary-default"
+                    }
+                },
+                "homeTab": {
+                    "mapping": {
+                        "paddingVertical": 4,
+                        "backgroundColor": "transparent",
+                        "indicatorHeight": 4,
+                        "indicatorBorderRadius": 2,
+                        "indicatorBackgroundColor": "transparent"
+                    }
+                }
+            }
         }
     }
 }

models/dialogModel.js

@@ -3,26 +3,28 @@ export default {
     state: {
         title: "",
         bodyText: "",
-        cancelable: "",
+        cancelable: false,
         cancelLabelText: "",
         confirmLabelText: "",
         confirmCallback: null,
         cancelCallback: null,
         diloadShow: false,
         status: "",
+        isEdit: false,
+        textAreaInfo: {
+            pla: "",
+            maxLength: 50,
+            defaultValue: "",
+        },
+        showInfo: {},
     },
     actions: ({ model, setState }) => ({
         showDialog({ ...props }) {
             setState({
                 diloadShow: true,
-                title: props.title,
-                bodyText: props.bodyText,
-                cancelable: props.cancelable,
-                cancelLabelText: props.cancelLabelText,
-                confirmLabelText: props.confirmLabelText,
-                confirmCallback: props.confirmCallback,
-                cancelCallback: props.cancelCallback,
-                status: props.status,
+                showInfo: {
+                    ...props,
+                },
             });
         },
         hideDialog() {

models/userModel.js

@@ -130,10 +130,10 @@ export default {
             const { loading, success } = model("loadingModel");
             const { httpPost, addAsyncStorage } = model("httpModel");
             httpPost(
-                "/merchant/save",
+                "/merchant/saveDTO",
                 {
                     ...data,
-                    id: mid,
+                    mid: mid,
                 },
                 { body: "json" }
             ).then((res) => {
@@ -145,5 +145,23 @@ export default {
             aliAccountEvent(aliAccount);
             aliNameEvent(aliName);
         },
+        updateMerchant({ ...data }) {
+            const { mid, getUserInfo } = model();
+            const { loading, success } = model("loadingModel");
+            const { httpPost, addAsyncStorage } = model("httpModel");
+            httpPost(
+                "/merchant/saveDTO",
+                {
+                    ...data,
+                    mid: mid,
+                },
+                { body: "json" }
+            ).then((res) => {
+                success("修改成功");
+                if (res) {
+                    getUserInfo(res);
+                }
+            });
+        },
     }),
 };

navigation/BottomTabNavigator.js

@@ -1,25 +1,31 @@
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import * as React from "react";
-
+import { useTheme, Text } from "@ui-kitten/components";
 import TabBarIcon from "../components/TabBarIcon";
-import HomeScreen from "../screens/HomeScreen";
+import HomeStackNavigator from "./HomeStackNavigator";
 import LinksScreen from "../screens/LinksScreen";
+import { useModel } from "flooks";
 
 const BottomTab = createBottomTabNavigator();
 
 export default function BottomTabNavigator({ navigation, route }) {
-    // Set the header title on the parent stack navigator depending on the
-    // currently active tab. Learn more in the documentation:
-    // https://reactnavigation.org/docs/en/screen-options-resolution.html
-    // navigation.setOptions({ headerTitle: getHeaderTitle(route) });
+    const theme = useTheme();
+    const { tab1, tab2, tab3 } = useModel("wordsModel");
 
     return (
-        <BottomTab.Navigator>
+        <BottomTab.Navigator headerMode='none'>
             <BottomTab.Screen
                 name='Home'
-                component={HomeScreen}
+                component={HomeStackNavigator}
                 options={{
-                    title: "Get Started",
+                    tabBarLabel: ({ focused }) => (
+                        <Text
+                            category='c1'
+                            status={focused ? "primary" : "info"}
+                        >
+                            {tab1}
+                        </Text>
+                    ),
                     tabBarIcon: ({ focused }) => (
                         <TabBarIcon focused={focused} name='home' />
                     ),
@@ -29,7 +35,14 @@ export default function BottomTabNavigator({ navigation, route }) {
                 name='Links'
                 component={LinksScreen}
                 options={{
-                    title: "Resources",
+                    tabBarLabel: ({ focused }) => (
+                        <Text
+                            category='c1'
+                            status={focused ? "primary" : "info"}
+                        >
+                            {tab2}
+                        </Text>
+                    ),
                     tabBarIcon: ({ focused }) => (
                         <TabBarIcon focused={focused} name='file-text' />
                     ),

navigation/HomeStackNavigator.js

@@ -0,0 +1,41 @@
+import {
+    createStackNavigator,
+    CardStyleInterpolators,
+} from "@react-navigation/stack";
+import * as React from "react";
+import { useModel } from "flooks";
+
+import HomeScreen from "../screens/HomeScreen";
+import Guide1Screen from "../screens/Guide1Screen";
+const HomeStack = createStackNavigator();
+
+const config = {
+    animation: "spring",
+    config: {
+        stiffness: 1000,
+        damping: 500,
+        mass: 3,
+        overshootClamping: true,
+        restDisplacementThreshold: 0.01,
+        restSpeedThreshold: 0.01,
+    },
+};
+
+export default function LoginStackNavigator() {
+    return (
+        <HomeStack.Navigator
+            headerMode='none'
+            screenOptions={{
+                gestureEnabled: true,
+                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+            }}
+            initialRouteName='Home'
+        >
+            <HomeStack.Screen name='Home' component={HomeScreen} />
+            <HomeStack.Screen
+                name='AddGoods'
+                component={Guide1Screen}
+            />
+        </HomeStack.Navigator>
+    );
+}

screens/Guide1Screen.js

@@ -25,13 +25,15 @@ import ScrollPage from "../components/ScrollPage";
 import ConnectButton from "../components/ConnectButton";
 import GuideHeaderBar from "../components/GuideHeaderBar";
 import Textarea from "react-native-textarea";
+import NavHeaderBar from "../components/NavHeaderBar";
 
 export default function Guide1Screen({ navigation, route }) {
     const theme = useTheme();
     const { changeBackground } = useModel("barModel");
     const { setNavigation, pushRouter } = useModel("routersModel", true);
-    const { httpGet } = useModel("httpModel", true);
-    const { registerSecend, changeGuideStep } = useModel("userModel", true);
+    const { httpGet, httpPost } = useModel("httpModel", true);
+    const { success } = useModel("loadingModel", true);
+    const { mid, changeGuideStep } = useModel("userModel", true);
 
     const {
         guide1_title1,
@@ -49,23 +51,12 @@ export default function Guide1Screen({ navigation, route }) {
         next,
         pass,
         passTips,
+        confirm,
+        addGoods,
     } = useModel("wordsModel");
     const { showDialog } = useModel("dialogModel");
-    const [categoryList, changeCategoryList] = React.useState([]);
-    const [merchantNatureList, changeMerchantNatureList] = React.useState([]);
-    useFocusEffect(
-        React.useCallback(() => {
-            changeBackground(theme["color-primary-500"]);
-            setNavigation(navigation);
-            httpGet("/category/tree", { id: 1 }).then((res) => {
-                changeCategoryList(res);
-            });
-
-            httpGet("/merchantNature/all").then((res) => {
-                changeMerchantNatureList(res.content);
-            });
-        }, [])
-    );
+    const routeName = route.name;
+    const [id, changeId] = React.useState("");
 
     const [name, changeName] = React.useState("");
     const [amount, changeAmount] = React.useState("");
@@ -75,6 +66,9 @@ export default function Guide1Screen({ navigation, route }) {
     const [startTime, changeStartTime] = React.useState("08:00");
     const [endTime, changeEndTime] = React.useState("22:00");
     const [introduction, changeIntroduction] = React.useState();
+    const [loadingSuccess, ChangeLoadingSuccess] = React.useState(false);
+    const [defaultValue, ChangeDefaultValue] = React.useState("");
+
     const [img, changeImg] = React.useState();
     const timeValue = React.useMemo(() => {
         if (week && startTime && endTime) {
@@ -84,6 +78,47 @@ export default function Guide1Screen({ navigation, route }) {
         }
     }, [week, startTime, endTime]);
 
+    useFocusEffect(
+        React.useCallback(() => {
+            changeBackground(theme["color-primary-500"]);
+            setNavigation(navigation);
+            console.log(route.params);
+            if (route.params) {
+                if (route.params.id) {
+                    changeId(route.params.id);
+                }
+            } else {
+                ChangeLoadingSuccess(true);
+            }
+        }, [])
+    );
+
+    React.useEffect(() => {
+        if (id) {
+            httpGet("/goods/get/" + id).then((res) => {
+                getInfo(res);
+                ChangeLoadingSuccess(true);
+            });
+        } else {
+            getInfo({});
+        }
+    }, [id]);
+
+    function getInfo(res) {
+        changeAmount(res.amount || "");
+        changeName(res.name || "");
+        changeDiscountAmount(res.discountAmount || "");
+        changeInventory(res.inventory || "");
+        changeWeek(res.week || "");
+        changeStartTime(res.startTime || "");
+        changeEndTime(res.endTime || "");
+        changeIntroduction(res.introduction || "");
+        changeImg(res.img || "");
+        if (res.week) {
+            ChangeDefaultValue([res.startTime + "~" + res.endTime, res.week]);
+        }
+    }
+
     const canNext = React.useMemo(() => {
         if (
             name &&
@@ -114,13 +149,20 @@ export default function Guide1Screen({ navigation, route }) {
 
     return (
         <>
-            <GuideHeaderBar />
+            {routeName != "AddGoods" ? (
+                <GuideHeaderBar />
+            ) : (
+                <NavHeaderBar title={addGoods} />
+            )}
+
             <ScrollPage>
                 <Layout style={styles.container}>
-                    <Card appearance='headFilled'>
-                        <Text category='s1'>{guide1_title1}</Text>
-                        <Text category='s1'>{guideHome_title2}</Text>
-                    </Card>
+                    {routeName != "AddGoods" && (
+                        <Card appearance='headFilled'>
+                            <Text category='s1'>{guide1_title1}</Text>
+                            <Text category='s1'>{guideHome_title2}</Text>
+                        </Card>
+                    )}
                     <Card appearance='formFilled'>
                         {/* 商品名称 */}
                         <FormInput
@@ -162,7 +204,7 @@ export default function Guide1Screen({ navigation, route }) {
                         <FormInput
                             label={guide1_form_5}
                             type='openTime'
-                            value={timeValue}
+                            defaultValue={defaultValue}
                             onChange={(week, startTime, endTime) => {
                                 changeWeek(week);
                                 changeStartTime(startTime);
@@ -171,16 +213,18 @@ export default function Guide1Screen({ navigation, route }) {
                         />
 
                         <Layout>
-                            <Textarea
-                                containerStyle={styles.textareaContainer}
-                                style={styles.textarea}
-                                onChangeText={changeIntroduction}
-                                defaultValue={introduction}
-                                maxLength={50}
-                                placeholder={guide1_pla_5}
-                                placeholderTextColor={"#B4B4B4"}
-                                underlineColorAndroid={"transparent"}
-                            />
+                            {loadingSuccess && (
+                                <Textarea
+                                    containerStyle={styles.textareaContainer}
+                                    style={styles.textarea}
+                                    onChangeText={changeIntroduction}
+                                    defaultValue={introduction}
+                                    maxLength={50}
+                                    placeholder={guide1_pla_5}
+                                    placeholderTextColor={"#B4B4B4"}
+                                    underlineColorAndroid={"transparent"}
+                                />
+                            )}
                         </Layout>
 
                         <FormInput
@@ -194,40 +238,58 @@ export default function Guide1Screen({ navigation, route }) {
                             <Button
                                 status='primary'
                                 disabled={!canNext}
-                                onPress={() =>
-                                    registerSecend({
-                                        category,
-                                        address,
-                                        week,
-                                        startTime,
-                                        endTime,
-                                        qualification,
-                                        merchantNatureId,
-                                        img,
-                                    })
-                                }
-                            >
-                                {next}
-                            </Button>
-                            <Button
-                                style={{ marginTop: 10 }}
-                                appearance='ghost'
-                                status='primary'
                                 onPress={() => {
-                                    showDialog({
-                                        bodyText: passTips,
-                                        cancelable: true,
-                                        confirmCallback: () => {
-                                            changeGuideStep(1, "Guide2");
+                                    httpPost(
+                                        "/goods/save",
+                                        {
+                                            id,
+                                            name,
+                                            amount,
+                                            discountAmount,
+                                            inventory,
+                                            week,
+                                            startTime,
+                                            endTime,
+                                            introduction,
+                                            img,
+                                            merchantId: mid,
                                         },
+                                        { body: "json" }
+                                    ).then((res) => {
+                                        success(id ? "修改" : "添加" + "成功");
+                                        if (id) {
+                                            getInfo(res);
+                                        } else {
+                                            navigation.navigate({
+                                                id: res.id,
+                                            });
+                                        }
                                     });
                                 }}
                             >
-                                {pass}
+                                {routeName != "AddGoods" ? next : confirm}
                             </Button>
+                            {routeName != "AddGoods" && (
+                                <Button
+                                    style={{ marginTop: 10 }}
+                                    appearance='ghost'
+                                    status='primary'
+                                    onPress={() => {
+                                        showDialog({
+                                            bodyText: passTips,
+                                            cancelable: true,
+                                            confirmCallback: () => {
+                                                changeGuideStep(1, "Guide2");
+                                            },
+                                        });
+                                    }}
+                                >
+                                    {pass}
+                                </Button>
+                            )}
                         </Layout>
                     </Card>
-                    <ConnectButton />
+                    {routeName != "AddGoods" && <ConnectButton />}
                 </Layout>
             </ScrollPage>
         </>

screens/HomeScreen.js

@@ -1,179 +1,364 @@
-import * as WebBrowser from 'expo-web-browser';
-import * as React from 'react';
-import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
-
-import { MonoText } from '../components/StyledText';
-
-export default function HomeScreen() {
-  return (
-    <View style={styles.container}>
-      <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
-        <View style={styles.welcomeContainer}>
-          <Image
-            source={
-              __DEV__
-                ? require('../assets/images/robot-dev.png')
-                : require('../assets/images/robot-prod.png')
-            }
-            style={styles.welcomeImage}
-          />
-        </View>
-
-        <View style={styles.getStartedContainer}>
-          <DevelopmentModeNotice />
-
-          <Text style={styles.getStartedText}>Open up the code for this screen:</Text>
-
-          <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
-            <MonoText>screens/HomeScreen.js</MonoText>
-          </View>
-
-          <Text style={styles.getStartedText}>
-            Change any of the text, save the file, and your app will automatically reload.
-          </Text>
-        </View>
-
-        <View style={styles.helpContainer}>
-          <TouchableOpacity onPress={handleHelpPress} style={styles.helpLink}>
-            <Text style={styles.helpLinkText}>Help, it didn’t automatically reload!</Text>
-          </TouchableOpacity>
-        </View>
-      </ScrollView>
-
-      <View style={styles.tabBarInfoContainer}>
-        <Text style={styles.tabBarInfoText}>This is a tab bar. You can edit it in:</Text>
-
-        <View style={[styles.codeHighlightContainer, styles.navigationFilename]}>
-          <MonoText style={styles.codeHighlightText}>navigation/BottomTabNavigator.js</MonoText>
-        </View>
-      </View>
-    </View>
-  );
-}
+import * as WebBrowser from "expo-web-browser";
+import * as React from "react";
+import {
+    Image,
+    Platform,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    ImageBackground,
+} from "react-native";
+import * as ImagePicker from "expo-image-picker";
+import scrollPage from "../decorator/scrollPage";
+import { useModel } from "flooks";
+import Badge from "../components/Badge";
+import {
+    Layout,
+    Tab,
+    TabView,
+    Text,
+    useTheme,
+    Button,
+    Card,
+    Icon,
+    MenuItem,
+    OverflowMenu,
+    TopNavigation,
+    TopNavigationAction,
+    Modal,
+} from "@ui-kitten/components";
+import FormInput from "../components/FormInput";
+import { useFocusEffect } from "@react-navigation/native";
+import ScrollPage from "../components/ScrollPage";
+import NavHeaderBar from "../components/NavHeaderBar";
+import GoodsCard from "../components/GoodsCard";
+import Textarea from "react-native-textarea";
+import HomePage1 from "./HomeScreenPage1";
 
-HomeScreen.navigationOptions = {
-  header: null,
-};
+const NextIcon = (props) => <Icon {...props} name='arrow-ios-downward' />;
+
+const SearchIcon = (props) => <Icon {...props} name='search-outline' />;
+const MailIcon = (props) => <Icon {...props} name='email-outline' />;
+const ShareIcon = (props) => <Icon {...props} name='share-outline' />;
+
+const MenuIcon = (props) => <Icon {...props} name='more-vertical' />;
+
+const InfoIcon = (props) => <Icon {...props} name='info' />;
+
+const LogoutIcon = (props) => <Icon {...props} name='log-out' />;
 
-function DevelopmentModeNotice() {
-  if (__DEV__) {
-    const learnMoreButton = (
-      <Text onPress={handleLearnMorePress} style={styles.helpLinkText}>
-        Learn more
-      </Text>
+export default function HomeScreen({ navigation, route }) {
+    const theme = useTheme();
+    const { changeBackground } = useModel("barModel");
+    const { setNavigation, pushRouter } = useModel("routersModel", true);
+    const {
+        showName,
+        logo,
+        introduction,
+        proclamation,
+        updateMerchant,
+        banner,
+    } = useModel("userModel");
+
+    const {
+        homeBar,
+        homeTip1,
+        homeTitle1,
+        homeTitle2,
+        homeTitle3,
+        homeTip2,
+        homeTip3,
+        homeTab1,
+        homeTab2,
+        homeTab3,
+    } = useModel("wordsModel");
+    const [bannerImg, changeBannerImg] = React.useState([]);
+    const [merchantNatureList, changeMerchantNatureList] = React.useState([]);
+
+    const { showDialog } = useModel("dialogModel", true);
+    const { httpPost } = useModel("httpModel", true);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+    useFocusEffect(
+        React.useCallback(() => {
+            changeBackground(theme["color-primary-500"]);
+            setNavigation(navigation);
+        }, [])
     );
 
-    return (
-      <Text style={styles.developmentModeText}>
-        Development mode is enabled: your app will be slower but you can use useful development
-        tools. {learnMoreButton}
-      </Text>
+    const canNext = React.useMemo(() => {
+        return true;
+    }, [name]);
+
+    const [menuVisible, setMenuVisible] = React.useState(false);
+
+    const toggleMenu = () => {
+        setMenuVisible(!menuVisible);
+    };
+
+    const renderMenuAction = () => (
+        <TopNavigationAction icon={MenuIcon} onPress={toggleMenu} />
     );
-  } else {
-    return (
-      <Text style={styles.developmentModeText}>
-        You are not in development mode: your app will run at full speed.
-      </Text>
+
+    const renderRightActions = () => (
+        <React.Fragment>
+            <TopNavigationAction icon={SearchIcon} />
+            <TopNavigationAction icon={MailIcon} />
+            <TopNavigationAction icon={ShareIcon} />
+            <OverflowMenu
+                anchor={renderMenuAction}
+                visible={menuVisible}
+                onBackdropPress={toggleMenu}
+            >
+                <MenuItem accessoryLeft={InfoIcon} title='About' />
+                <MenuItem accessoryLeft={LogoutIcon} title='Logout' />
+            </OverflowMenu>
+        </React.Fragment>
     );
-  }
-}
 
-function handleLearnMorePress() {
-  WebBrowser.openBrowserAsync('https://docs.expo.io/versions/latest/workflow/development-mode/');
-}
+    const renderBackAction = () => <Text category='h6'>{homeBar}</Text>;
+
+    return (
+        <>
+            <ScrollPage>
+                <TopNavigation
+                    appearance='homeBar'
+                    alignment='center'
+                    accessoryLeft={renderBackAction}
+                    accessoryRight={renderRightActions}
+                />
+                <Layout style={styles.container}>
+                    <ImageBackground source={banner} style={styles.banner}>
+                        <Button
+                            appearance='bannerButton'
+                            onPress={() => {
+                                _pickImage().then((img) => {
+                                    httpPost("/upload/base64", {
+                                        base64: img,
+                                    }).then((res) => {
+                                        updateMerchant({ banner: res });
+                                    });
+                                });
+                            }}
+                        >
+                            {homeTip1}
+                        </Button>
+                    </ImageBackground>
+
+                    <Card appearance='homeCard' style={styles.homeCard}>
+                        <Image source={logo} style={styles.icon} />
 
-function handleHelpPress() {
-  WebBrowser.openBrowserAsync(
-    'https://docs.expo.io/versions/latest/get-started/create-a-new-app/#making-your-first-change'
-  );
+                        <Layout style={styles.cardMain}>
+                            <Layout style={styles.cardTop}>
+                                <Text>{showName}</Text>
+                                <Layout style={[styles.FlexRow]}>
+                                    <Layout
+                                        style={[styles.FlexRow, styles.layItem]}
+                                    >
+                                        <Image
+                                            source={require("../assets/images/zan.png")}
+                                            style={styles.zanImg}
+                                        />
+                                        <Text category='c1' status='primary'>
+                                            0
+                                        </Text>
+                                    </Layout>
+                                    <Layout
+                                        style={[styles.FlexRow, styles.layItem]}
+                                    >
+                                        <Image
+                                            source={require("../assets/images/cai.png")}
+                                            style={styles.zanImg}
+                                        />
+                                        <Text category='c1' status='info'>
+                                            0
+                                        </Text>
+                                    </Layout>
+                                    <Layout>
+                                        <Text category='c1' status='info'>
+                                            {homeTip2}
+                                        </Text>
+                                    </Layout>
+                                </Layout>
+                            </Layout>
+
+                            <Layout style={styles.badges}>
+                                <Badge style={styles.badge}>40减20</Badge>
+                                <Badge style={styles.badge}>69减38</Badge>
+                                <Badge>100减50</Badge>
+                            </Layout>
+                        </Layout>
+
+                        <Button
+                            appearance='labelButton'
+                            accessoryRight={NextIcon}
+                            children={(TextProps) => (
+                                <Text
+                                    style={[TextProps.style, styles.labelText]}
+                                    numberOfLines={1}
+                                    ellipsizeMode='tail'
+                                >
+                                    {homeTip3}:{proclamation}
+                                </Text>
+                            )}
+                            onPress={() => {
+                                showDialog({
+                                    pla: "",
+                                    maxLength: 50,
+                                    defaultValue: proclamation,
+                                    isEdit: true,
+                                    title: homeTitle3,
+                                    cancelable: true,
+                                    confirmCallback: (info) => {
+                                        updateMerchant({ proclamation: info });
+                                    },
+                                });
+                            }}
+                        />
+                    </Card>
+
+                    <Layout style={styles.mainContent}>
+                        <TabView
+                            tabBarStyle={styles.tab}
+                            appearance='homeTab'
+                            selectedIndex={selectedIndex}
+                            onSelect={(index) => setSelectedIndex(index)}
+                            indicatorStyle={styles.tabIndicator}
+                        >
+                            <Tab
+                                title={homeTab1}
+                                appearance='homeTab'
+                                style={styles.tab}
+                            >
+                                <HomePage1 />
+                            </Tab>
+                            <Tab
+                                title={homeTab2}
+                                appearance='homeTab'
+                                style={styles.tab}
+                            >
+                                <Layout style={styles.tabContainer}>
+                                    <Text category='h5'>ORDERS</Text>
+                                </Layout>
+                            </Tab>
+                            <Tab
+                                title={homeTab3}
+                                appearance='homeTab'
+                                style={styles.tab}
+                            >
+                                <Layout style={styles.tabContainer}>
+                                    <Text category='h5'>TRANSACTIONS</Text>
+                                </Layout>
+                            </Tab>
+                        </TabView>
+                    </Layout>
+                </Layout>
+            </ScrollPage>
+        </>
+    );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  developmentModeText: {
-    marginBottom: 20,
-    color: 'rgba(0,0,0,0.4)',
-    fontSize: 14,
-    lineHeight: 19,
-    textAlign: 'center',
-  },
-  contentContainer: {
-    paddingTop: 30,
-  },
-  welcomeContainer: {
-    alignItems: 'center',
-    marginTop: 10,
-    marginBottom: 20,
-  },
-  welcomeImage: {
-    width: 100,
-    height: 80,
-    resizeMode: 'contain',
-    marginTop: 3,
-    marginLeft: -10,
-  },
-  getStartedContainer: {
-    alignItems: 'center',
-    marginHorizontal: 50,
-  },
-  homeScreenFilename: {
-    marginVertical: 7,
-  },
-  codeHighlightText: {
-    color: 'rgba(96,100,109, 0.8)',
-  },
-  codeHighlightContainer: {
-    backgroundColor: 'rgba(0,0,0,0.05)',
-    borderRadius: 3,
-    paddingHorizontal: 4,
-  },
-  getStartedText: {
-    fontSize: 17,
-    color: 'rgba(96,100,109, 1)',
-    lineHeight: 24,
-    textAlign: 'center',
-  },
-  tabBarInfoContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    ...Platform.select({
-      ios: {
-        shadowColor: 'black',
-        shadowOffset: { width: 0, height: -3 },
-        shadowOpacity: 0.1,
-        shadowRadius: 3,
-      },
-      android: {
-        elevation: 20,
-      },
-    }),
-    alignItems: 'center',
-    backgroundColor: '#fbfbfb',
-    paddingVertical: 20,
-  },
-  tabBarInfoText: {
-    fontSize: 17,
-    color: 'rgba(96,100,109, 1)',
-    textAlign: 'center',
-  },
-  navigationFilename: {
-    marginTop: 5,
-  },
-  helpContainer: {
-    marginTop: 15,
-    alignItems: 'center',
-  },
-  helpLink: {
-    paddingVertical: 15,
-  },
-  helpLinkText: {
-    fontSize: 14,
-    color: '#2e78b7',
-  },
+    container: {
+        flex: 1,
+        backgroundColor: "#F0F0F0",
+    },
+    icon: {
+        width: 53,
+        height: 53,
+        backgroundColor: "#E5E5E5",
+        borderRadius: 3,
+        position: "absolute",
+        left: 10,
+        top: 10,
+        zIndex: 2,
+    },
+    text: {
+        fontWeight: "500",
+        marginBottom: 7,
+    },
+    button: {
+        marginTop: 19,
+    },
+    banner: {
+        height: 100,
+        backgroundColor: "#E5E5E5",
+    },
+    FlexRow: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    zanImg: {
+        width: 12,
+        height: 12,
+        marginRight: 3,
+    },
+    layItem: {
+        width: 40,
+        marginRight: 10,
+    },
+    cardMain: {
+        alignItems: "center",
+        zIndex: 1,
+    },
+    cardTop: {
+        height: 53,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    badges: {
+        flexDirection: "row",
+        justifyContent: "center",
+    },
+    badge: {
+        marginRight: 15,
+    },
+    labelText: {
+        width: 223,
+        textAlign: "left",
+    },
+    homeCard: {
+        position: "absolute",
+        left: 13,
+        top: 66,
+        right: 13,
+        zIndex: 2,
+    },
+    mainContent: {
+        paddingTop: 100,
+        backgroundColor: "transparent",
+    },
+    tab: {
+        backgroundColor: "transparent",
+        zIndex: 2,
+    },
+    tabContainer: {
+        backgroundColor: "transparent",
+    },
+    tabIndicator: {
+        height: 13,
+        borderRadius: "50%",
+        bottom: 18,
+        maxWidth: 27,
+        marginHorizontal: 49,
+        zIndex: 1,
+    },
 });
+
+const _pickImage = () => {
+    return new Promise(async (resolve, reject) => {
+        try {
+            let result = await ImagePicker.launchImageLibraryAsync({
+                mediaTypes: ImagePicker.MediaTypeOptions.All,
+                allowsEditing: true,
+                aspect: [4, 3],
+                quality: 1,
+            });
+            if (!result.cancelled) {
+                resolve(result.uri);
+            }
+        } catch (e) {
+            reject(e);
+        }
+    });
+};

screens/HomeScreenPage1.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Icon, useTheme, Text, Card, Layout } from "@ui-kitten/components";
+import {
+    Image,
+    Platform,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    ImageBackground,
+    Dimensions,
+} from "react-native";
+import GoodsCard from "../components/GoodsCardVertical";
+
+const width = Dimensions.get("window").width;
+export default function HomePage1(props) {
+    const theme = useTheme();
+
+    return (
+        <Layout style={styles.tabContainer}>
+            <Card
+                appearance='homePage1Card'
+                disabled={true}
+                style={styles.card}
+                header={(props) => (
+                    <Text {...props} style={[styles.title, props.style]}>
+                        店主推荐
+                    </Text>
+                )}
+            >
+                <Layout style={styles.goodsList}>
+                    <GoodsCard />
+                    <GoodsCard />
+                </Layout>
+            </Card>
+        </Layout>
+    );
+}
+
+const styles = StyleSheet.create({
+    tabContainer: {
+        backgroundColor: "transparent",
+    },
+    goodsList: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        paddingVertical: 10,
+        width: width - 30,
+    },
+    title: {
+        alignSelf: "stretch",
+    },
+    card: {
+        alignItems: "center",
+    },
+});

theme.json

@@ -29,21 +29,21 @@
     "color-success-transparent-400": "rgba(78, 232, 150, 0.32)",
     "color-success-transparent-500": "rgba(78, 232, 150, 0.4)",
     "color-success-transparent-600": "rgba(78, 232, 150, 0.48)",
-    "color-info-100": "#CCFEFB",
-    "color-info-200": "#99FCFE",
-    "color-info-300": "#66F0FD",
-    "color-info-400": "#40DDFB",
-    "color-info-500": "#02C0F9",
-    "color-info-600": "#0195D6",
-    "color-info-700": "#0170B3",
-    "color-info-800": "#005090",
-    "color-info-900": "#003977",
-    "color-info-transparent-100": "rgba(2, 192, 249, 0.08)",
-    "color-info-transparent-200": "rgba(2, 192, 249, 0.16)",
-    "color-info-transparent-300": "rgba(2, 192, 249, 0.24)",
-    "color-info-transparent-400": "rgba(2, 192, 249, 0.32)",
-    "color-info-transparent-500": "rgba(2, 192, 249, 0.4)",
-    "color-info-transparent-600": "rgba(2, 192, 249, 0.48)",
+    "color-info-100": "#FBFBFB",
+    "color-info-200": "#F7F7F7",
+    "color-info-300": "#E8E8E8",
+    "color-info-400": "#D2D2D2",
+    "color-info-500": "#B4B4B4",
+    "color-info-600": "#9A8385",
+    "color-info-700": "#815A61",
+    "color-info-800": "#683945",
+    "color-info-900": "#562234",
+    "color-info-transparent-100": "rgba(180, 180, 180, 0.08)",
+    "color-info-transparent-200": "rgba(180, 180, 180, 0.16)",
+    "color-info-transparent-300": "rgba(180, 180, 180, 0.24)",
+    "color-info-transparent-400": "rgba(180, 180, 180, 0.32)",
+    "color-info-transparent-500": "rgba(180, 180, 180, 0.4)",
+    "color-info-transparent-600": "rgba(180, 180, 180, 0.48)",
     "color-warning-100": "#FEFED9",
     "color-warning-200": "#FEFDB4",
     "color-warning-300": "#FCFB8F",
@@ -59,22 +59,22 @@
     "color-warning-transparent-400": "rgba(247, 244, 69, 0.32)",
     "color-warning-transparent-500": "rgba(247, 244, 69, 0.4)",
     "color-warning-transparent-600": "rgba(247, 244, 69, 0.48)",
-    "color-danger-100": "#FFE3D4",
-    "color-danger-200": "#FFBFA9",
-    "color-danger-300": "#FF947E",
-    "color-danger-400": "#FF6C5E",
-    "color-danger-500": "#FF2929",
-    "color-danger-600": "#DB1D2E",
-    "color-danger-700": "#B71430",
-    "color-danger-800": "#930D30",
-    "color-danger-900": "#7A072F",
-    "color-danger-transparent-100": "rgba(255, 41, 41, 0.08)",
-    "color-danger-transparent-200": "rgba(255, 41, 41, 0.16)",
-    "color-danger-transparent-300": "rgba(255, 41, 41, 0.24)",
-    "color-danger-transparent-400": "rgba(255, 41, 41, 0.32)",
-    "color-danger-transparent-500": "rgba(255, 41, 41, 0.4)",
-    "color-danger-transparent-600": "rgba(255, 41, 41, 0.48)",
+    "color-danger-100": "#FEEAD8",
+    "color-danger-200": "#FDCFB1",
+    "color-danger-300": "#FAAD89",
+    "color-danger-400": "#F68D6B",
+    "color-danger-500": "#F15A3C",
+    "color-danger-600": "#CF3A2B",
+    "color-danger-700": "#AD201E",
+    "color-danger-800": "#8B131A",
+    "color-danger-900": "#730B1A",
+    "color-danger-transparent-100": "rgba(241, 90, 60, 0.08)",
+    "color-danger-transparent-200": "rgba(241, 90, 60, 0.16)",
+    "color-danger-transparent-300": "rgba(241, 90, 60, 0.24)",
+    "color-danger-transparent-400": "rgba(241, 90, 60, 0.32)",
+    "color-danger-transparent-500": "rgba(241, 90, 60, 0.4)",
+    "color-danger-transparent-600": "rgba(241, 90, 60, 0.48)",
     "text-basic-color": "#000",
-    "color-basic-600":"#B4B4B4",
-    "text-subtitle-2-font-size":16
+    "color-basic-600": "#B4B4B4",
+    "text-subtitle-2-font-size": 16
 }