React Native
Navigation
Stack navigation ile iki ekranı birleştirirsin.
Navigation ekle
Uygulama artık ürün ekleyebiliyor. Şimdi navigasyon ekleyerek ileride bir detay ekranına geçiş yapacağız. NavigationContainer'ı @react-navigation/native'den, createNativeStackNavigator'ı @react-navigation/native-stack'ten içe aktarırız.
Mevcut App bileşenini HomeScreen olarak yeniden adlandırırız. Yeni bir App bileşeni tanımlar ve içine NavigationContainer ile Stack.Navigator koyarız. Stack.Screen ile HomeScreen'i kaydederiz. Böylece uygulama bir navigasyon yığınına sahip olur.
Stack.Screen kaydı
Stack.Navigator içine her ekran için bir Stack.Screen koyarsın. Her Stack.Screen, name (ekran adı) ve component (bileşen) öznitelikleri alır. İlk kaydedilen ekran, uygulama açıldığında gösterilen başlangıç ekranıdır.
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
Burada HomeScreen bileşeni Home adıyla kaydedilir. İleride navigation.navigate('Home') çağrısıyla bu ekrana dönebiliriz. name değeri, navigasyon çağrılarında kullanılan anahtardır.
Uygulama Sıra sende: navigasyon kur
NavigationContainer'ı @react-navigation/native'den, createNativeStackNavigator'ı @react-navigation/native-stack'ten içe aktar. Stack değişkenine createNativeStackNavigator() ata. Yeni bir App bileşeni yaz; içine <NavigationContainer> ve <Stack.Navigator> koy, <Stack.Screen name="Home" component={HomeScreen} /> 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() {
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])} />
</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.Navigator>
</NavigationContainer>
);
}
Kendini test et
-
Eşleştir: bileşen ve görevi
- NavigationContainer
- kök sarmalayıcı
- Stack.Navigator
- ekran sarmalayıcı
- Stack.Screen
- tek ekran
-
NavigationContainer ne işe yarar?
<NavigationContainer>...</NavigationContainer>
- Metin görüntüler
- Stil tanımlar
- Veri saklar
- Kök navigasyon sarmalayıcıdır
Cevabı göster
Kök navigasyon sarmalayıcıdır — NavigationContainer kök navigasyon sarmalayıcıdır.
-
Boşluğu doldur: NavigationContainer içe aktarma
import { ____ } from '@react-navigation/native';
Cevabı göster
import { NavigationContainer } from '@react-navigation/native';
Sıradaki ders: Birleştirme
