כדי לאסוף את כל מה שהיה עד כה, נבנה פרויקט לדוגמא. בפרוייקט נבנה כרטיסים מעוצבים שמכילים מתכונים.
הקמת פרויקט ריק
נתחיל עם קוד בסיסי על המסך:
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>
);
}
את המידע ששלחנו לקומפוננטה, נקבל ונפרק.