Birleştirme

Tüm parçaları birleştirerek çalışan bir final uygulaması yazarsın.

Details ekranı ekle

Son adımda bir DetailsScreen ekleyeceğiz ve HomeScreen'den oraya geçiş yapacağız. DetailsScreen, route prop'undan itemNo parametresini okur ve bir <Text> ile gösterir. Bir <Button> ile navigation.goBack() çağrılarak geri dönülür.

HomeScreen'e bir Button ekleriz: basıldığında navigation.navigate('Details', { itemNo: 1 }) çağrılır. Stack.Navigator içine <Stack.Screen name="Details" component={DetailsScreen} /> ekleriz. Böylece uygulama tamamlanır: ürün ekleyebilir, detaya geçebilir ve geri dönebilirsin.

Uygulama Sıra sende: Details ekranı ve geçiş

Bir DetailsScreen bileşeni ekle: route ve navigation prop'larını alsın, route.params'tan itemNo'yu okusun, bir <Text> ile göstersin ve bir <Button> ile navigation.goBack() çağırsın. HomeScreen'e bir Button ekle: onPress'inde navigation.navigate('Details', { itemNo: 1 }) çağrılsın. Stack.Navigator içine <Stack.Screen name="Details" component={DetailsScreen} /> ekle.

Örnek çözümü göster

import { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  const [text, setText] = useState('');
  const [items, setItems] = useState([]);
  return (
    <View style={styles.container}>
      <Text>Alışveriş Listesi</Text>
      <TextInput value={text} onChangeText={setText} placeholder="Ürün adı" style={styles.input} />
      <Button title="Ekle" onPress={() => setItems([...items, text])} />
      <Button title="Detay" onPress={() => navigation.navigate('Details', { itemNo: 1 })} />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemNo } = route.params;
  return (
    <View style={styles.container}>
      <Text>Ürün no: {itemNo}</Text>
      <Button title="Geri" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createNativeStackNavigator();

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  input: { borderWidth: 1, padding: 8, marginBottom: 8 },
});

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Birleştirme

Projenin sonuna geldin! Şimdi tüm parçalar bir araya geldi: View ve Text ile iskelet, TextInput ile kullanıcı girdisi, useState ile durum yönetimi, Button ile etkileşim ve navigation ile ekran geçişleri.

Bu proje, başlangıç seviyesinin özetidir. Öğrendiğin her kavram gerçek bir uygulamada kullanıldı: ürün ekleme, detay görüntüleme ve geri dönme. Bundan sonraki seviyede daha karmaşık durum yönetimi, liste optimizasyonu ve veri çekme konularını göreceksin.

Kendini test et

navigate ile params nasıl geçilir?
```
navigation.navigate('Details', ?)
```
- { itemNo: 1 }
- 1
- 'itemNo'
- [1]
Cevabı göster

{ itemNo: 1 } — params bir nesne olarak { itemNo: 1 } geçilir.
Eşleştir: kavram ve kullanımı

navigate

ekran açma
goBack

geri dönme
route.params

veri okuma
Boşluğu doldur: geri dön
```
navigation.____();
```
Cevabı göster
```
navigation.goBack();
```

Sıradaki ders: Başlangıç bölüm sınavı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler