React Native
Birleştirme
Tüm parçaları birleştirerek çalışan bir e-ticaret uygulaması yazarsın.
Birleştirme
Son adımda tüm parçaları bağlarız. Bir useCart hook'u ekleriz: () => useContext(CartContext). Bu hook, sepete tek noktadan erişmeyi sağlar; her ekranda ayrı prop geçirmeden cart ve addToCart alınır.
Header'a Sepet: {cart.length} sayacı, detaya Sepete ekle butonu koyarız. Buton addToCart(selected) çağırır; ürün sepete eklenir ve sayaç anında artar. Böylece uygulama tek bir akışa kavuşur.
Uygulama useCart ve sepete ekle butonu
Bir useCart hook'u ekle (useContext(CartContext) döndürsün). App içinde const { cart, addToCart } = useCart() ile sepete eriş; header'da Sepet: {cart.length} göster; detayda <Text onPress={() => addToCart(selected)}>Sepete ekle</Text> butonu koy.
Örnek çözümü göster
import React, { createContext, useContext, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Kalem', price: 20 },
{ id: '2', name: 'Defter', price: 35 },
]
const CartContext = createContext();
function CartProvider({ children }) {
const [cart, setCart] = useState([]);
const addToCart = (item) => setCart([...cart, item]);
return (
<CartContext.Provider value={{ cart, addToCart }}>
{children}
</CartContext.Provider>
);
}
function useCart() {
return useContext(CartContext);
}
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
const { cart, addToCart } = useCart();
if (selected) {
return (
<View>
<Text>{selected.name}</Text>
<Text onPress={() => setSelectedId(null)}>Geri</Text>
<Text onPress={() => addToCart(selected)}>Sepete ekle</Text>
</View>
);
}
return (
<View>
<Text>Sepet: {cart.length}</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Text onPress={() => setSelectedId(item.id)}>{item.name}</Text>
)}
/>
</View>
);
}
Uygulama tamam
Artık tüm parçalar bir arada: ürün verisi, FlatList listesi, state ile detay geçişi ve Context ile sepet. useCart sepete tek noktadan erişim sağlar; sayaç ve buton sepeti görünür kılar.
Bu yapı, gerçek bir uygulamada da aynıdır: veri, liste, detay ve paylaşılan sepet. Navigasyon kütüphanesi eklemek istersen selectedId yerine React Navigation kullanabilirsin; Context aynı kalır.
Kendini test et
-
useCart hook'u ne döndürür?
- useContext(CartContext) sonucunu
- Yeni bir Context
- products dizisini
- selected ürünü
Cevabı göster
useContext(CartContext) sonucunu — useCart, useContext(CartContext) döndürür.
-
Sepet sayacını yaz
<Text>Sepet: {____}</Text>
Cevabı göster
<Text>Sepet: {cart.length}</Text>
-
Birleştirme kavramlarını eşleştir
- useCart
- Sepete erişir
- cart.length
- Sepet sayısı
- addToCart(selected)
- Ürün ekler
- CartProvider
- Uygulamayı sarar
Sıradaki ders: Animated.Value
