React Native Öğreniyorum Bölüm 4

Bu bölümde React Native Expo ile sayfalar arasında geçiş yapabilmek için Navigation yapacağız. Bu yazımızda React Native Expo projelerimizde navigation nasıl kurulur ve kullanılır detaylıca göz atacağız.

Başlangıç

Öncelikle React Native Expo ile bir proje başlatalım.

expo init navigationTest

Navigation için gerekli kütüphanelerin kurulması

React Navigation kütüphanesi , React Native için en popüler navigasyonlarından biridir. Paketin kurulumuna geçelim..

npm install @react-navigation/native

React Navigation kütüphanesinin Expo projeleriyle uyumlu olması için aşağıdaki komutu kullanarak gerekli dependencies kurulumlarını gerçekleştirelim.

expo install react-native-screens react-native-safe-area-context

Uygulamanızda basit bir stack navigator oluşturmak için, önce @react-navigation/stack kütüphanesini kuralım.

npm install @react-navigation/stack

Navigator Oluşturalım

Bir stack navigator oluşturarak başlayalım. Projedeki “App.js” dosyanızı aşağıdaki gibi düzenleyin.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

Ekranları Oluşturma

Proje klasörü altında “screens” adında bir klasör oluşturup altında “DetailsScreen” ve “HomeScreen” adında iki adet dosya oluşturalım.

“HomeScreen ”dosyası için örnek kodlarımız aşağıdaki gibidir.

import React from 'react';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

export default HomeScreen;

“DetailsScreen” için örnek kodlarımız aşağıdaki gibidir.

import React from 'react';
import { View, Text, Button } from 'react-native';

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
}

export default DetailsScreen;

Yukarıdaki kod örnekleriyle beraber React Native Expo projenizde temel bir navigation sistemi kurduk. “HomeScreen ”ve “DetailsScreen ”arasında geçiş yapabiliyorsunuz. “React Navigation” , “tab navigators”, “drawer navigators” gibi daha gelişmiş navigation seçenekleri de sunmaktadır.