ios app

2026-01-13 15:10:13 +08:00
parent 38f0885a85
commit 45d5debead
134 changed files with 16980 additions and 1 deletions
--- a/argon-pro-react-native/screens/Category.js
+++ b/argon-pro-react-native/screens/Category.js
@@ -0,0 +1,159 @@
+import React from "react";
+import {
+  Image,
+  StyleSheet,
+  ScrollView,
+  Dimensions,
+  TouchableWithoutFeedback
+} from "react-native";
+import { Block, Text, theme } from "galio-framework";
+
+import { Card } from "../components/";
+import categories from "../constants/categories";
+import { argonTheme } from "../constants";
+
+const { width } = Dimensions.get("window");
+const cardWidth = width - theme.SIZES.BASE * 2;
+
+export default class Category extends React.Component {
+  renderSuggestions = () => {
+    const { navigation, route } = this.props;
+    // const { params } = navigation && navigation.state;
+    // const category = categories[params.id];
+    // const suggestions = category && category.suggestions;
+    const category = categories[route.params?.id];
+    const suggestions = category && category.suggestions;
+
+    if (!suggestions) return null;
+
+    return (
+      <React.Fragment>
+        <Card item={suggestions[0]} style={{ marginRight: theme.SIZES.BASE }} />
+        <Card item={suggestions[1]} />
+      </React.Fragment>
+    );
+  };
+
+  renderCard = (item, index) => {
+    const { navigation } = this.props;
+    return (
+      <TouchableWithoutFeedback
+        key={`Card-${item.title}`}
+        onPress={() => navigation.navigate("Product", { product: item })}
+      >
+        <Block flex style={styles.Card}>
+          <Image
+            resizeMode="cover"
+            style={styles.image}
+            source={{ uri: item.image }}
+          />
+          <Block center style={{ paddingHorizontal: theme.SIZES.BASE }}>
+            <Text
+              center
+              size={16}
+              color="#525F7F"
+              style={styles.price}
+            >
+              $125
+            </Text>
+            <Text style={{ fontFamily: 'open-sans-regular' }} center size={34} color={argonTheme.COLORS.TEXT}>
+              {item.title}
+            </Text>
+            <Text
+              center
+              size={16}
+              color={argonTheme.COLORS.MUTED}
+              style={styles.description}
+            >
+              {item.description}
+            </Text>
+          </Block>
+        </Block>
+      </TouchableWithoutFeedback>
+    );
+  };
+
+  render() {
+    const { navigation, route } = this.props;
+    // const { params } = navigation && navigation.state;
+    // const category = categories[params.id];
+    const category = categories[route.params?.id];
+   
+    return (
+      <Block flex>
+        <ScrollView
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator={false}
+        >
+          <Block flex={3}>
+            <ScrollView
+              horizontal={true}
+              pagingEnabled={true}
+              decelerationRate={0}
+              scrollEventThrottle={16}
+              snapToAlignment="center"
+              showsHorizontalScrollIndicator={false}
+              snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
+              contentContainerStyle={{ paddingRight: theme.SIZES.BASE }}
+            >
+              {category &&
+                category.images.map((item, index) =>
+                  this.renderCard(item, index)
+                )}
+            </ScrollView>
+          </Block>
+          <Block flex row style={{ marginHorizontal: theme.SIZES.BASE }}>
+            {this.renderSuggestions()}
+          </Block>
+        </ScrollView>
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  Card: {
+    width: cardWidth - theme.SIZES.BASE * 2,
+    marginHorizontal: theme.SIZES.BASE,
+    marginTop: theme.SIZES.BASE * 2,
+    shadowColor: "black",
+    shadowOffset: { width: 0, height: 7 },
+    shadowRadius: 10,
+    shadowOpacity: 0.2
+  },
+  image: {
+    width: cardWidth - theme.SIZES.BASE,
+    height: cardWidth - theme.SIZES.BASE,
+    borderRadius: 3
+  },
+  imageVertical: {
+    overflow: "hidden",
+    borderTopRightRadius: 4,
+    borderTopLeftRadius: 4
+  },
+  price: {
+    fontFamily: 'open-sans-bold',
+    paddingTop: theme.SIZES.BASE,
+    paddingBottom: theme.SIZES.BASE / 2
+  },
+  description: {
+    fontFamily: 'open-sans-regular',
+    paddingTop: theme.SIZES.BASE,
+    paddingBottom: theme.SIZES.BASE * 2
+  },
+  suggestion: {
+    backgroundColor: theme.COLORS.WHITE,
+    marginBottom: theme.SIZES.BASE,
+    borderWidth: 0,
+    marginLeft: theme.SIZES.BASE / 2,
+    marginRight: theme.SIZES.BASE / 2
+  },
+  suggestionTitle: {
+    flex: 1,
+    flexWrap: "wrap",
+    paddingBottom: 6
+  },
+  suggestionDescription: {
+    padding: theme.SIZES.BASE / 2
+  }
+});