פרוייקט לדוגמא

כדי לאסוף את כל מה שהיה עד כה, נבנה פרויקט לדוגמא. בפרוייקט נבנה כרטיסים מעוצבים שמכילים מתכונים.

הקמת פרויקט ריק

נתחיל עם קוד בסיסי על המסך:

import { View, StyleSheet, SafeAreaView } from "react-native";

export default function Index() { 
  return (
    <SafeAreaView style={styles.safeContainer}>

    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeContainer: {
    flex: 1,
    backgroundColor: "#f5f5f5",
    paddingTop: 25
  }
}) 

השלב הבא הוא לשים את תמונות המתכונים בתיקיית assets על מנת להשתמש בהן בהמשך.

בתוך תיקיית components ניצור קובץ חדש בשם: RecipeCard.js. נכניס קוד בסיסי לקומפוננטה:

import { View, Text } from "react-native";

export default function RecipeCard(){
    return(
        <View>
            <Text>Recipe Card</Text>
        </View>
    )
}

נייבא ונציג אותה בקובץ הראשי.

עיצוב הכרטיס

נכין את העיצוב הבסיסי של הכרטיס עם רקע ומסגרת. את הצל נחולל לפי מערכת הפעלה.

import { View, Text, StyleSheet, Platform } from "react-native";

export default function RecipeCard(){
    return(
        <View style={styles.card}>
            <Text>Recipe Card</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    card: {
        backgroundColor: "white",
        borderRadius: 16,
        borderWidth: 2,
        padding: 16,
        margin: 16,
        ...Platform.select({
            ios: {
              shadowOffset: { width: 2, height: 2 },
              shadowColor: "#333",
              shadowOpacity: 0.3,
              shadowRadius: 4,
            },
            android: {
              elevation: 5,
            },
        }),
    }
  }) 

ככה זה נראה בשלב הזה:

הכנסת התוכן

נתחיל מבניית האובייקט שאליו יוכנסו פרטי המתכון. על מנת לשמור על הסדר יצרתי תיקיית models ובתוכה את interface המתכון בקובץ RecipeCard.ts.

export default interface RecipeCardDisplay {
    name: string;
    image: string;
    ingredients: string[];
    instructions: string[];
    prepTime: number;
    coockingTime: number;
    servings: number;
    calories: number;
}

בקובץ הראשי הגדרתי את האובייקט של המתכון הראשון. את המידע הזה נשלח לקומפוננטת הכרטיס.

export default function Index() { 
  const chocolateChipCookies: RecipeCardDisplay = {
    name: "Almond Flour Chocolate Chip Cookies",
    image: "./assets/images/Almond_Flour_Chocolate_Chip.png",
    ingredients: [
      "2 cups almond flour (or replace with oat flour or coconut flour, adjust to 1.5 cups for oat, 1 cup for coconut)",
      "1/2 tsp baking powder",
      "1/4 tsp salt",
      "1/3 cup coconut oil, melted",
      "1/2 cup coconut sugar",
      "1 large egg",
      "1 tsp vanilla extract",
      "1/2 cup dark chocolate chips"
      ],
    instructions: [
      "Preheat oven to 350°F (175°C). Line a baking sheet with parchment paper.",
      "In a bowl, mix almond flour, baking powder, and salt.",
      "In another bowl, whisk coconut oil, coconut sugar, egg, and vanilla.",
      "Combine wet and dry ingredients and stir until a dough forms.",
      "Fold in chocolate chips.",
      "Scoop dough onto the prepared baking sheet.",
      "Bake for 10-12 minutes, or until edges are golden brown.",
      "Cool completely before serving."
    ],
    prepTime: 10,
    coockingTime: 12,
    servings: 9,
    calories: 281
  }

  return (
    <SafeAreaView style={styles.safeContainer}>
        <RecipeCard {...chocolateChipCookies}/>
    </SafeAreaView>
  );
}

את המידע ששלחנו לקומפוננטה, נקבל ונפרק.

ניווט במאמר

מאמרים אחרונים

Weekly Tutorial