Bilişim dünyasına kaliteli, özgün ve Türkçe içerikler kazandırmayı hedefleyen bir platform..

Sayfalar arası geçiş yapmak için kullanıyoruz ayrıca Animasyonlar ve Authentication işlemleri için kullanabiliriz.

Başlangıç

React Navigation içinde 3 çeşit navigator vardır. En az birini kullanmanız gerekir ya da hepsini beraber kullanabilirsiniz.

1. StackNavigator :Tüm sayfayı kullanmak istiyorsanız kullanmanız gereken navigator.
2. TabNavigator : Tab'lardan oluşan bir uygulamanız varsa kullanmanız gereken navigator.
3. DrawerNavigator :Yandan açılmalı bir sidebar ile sayfa yönlendirmesi yapmak istiyorsanız kullanmanız gereken navigator.

Öncelikle React Navigation, daha sonra dependency(bağımlılıklar) kurulmalı. React Navigation bir javascript kütüphanesidir. O yüzden tek yapmamız gereken, npm veya yarn ile uygulamamıza dependency olarak eklemek.

//npm kullanıyorsanız
npm install @react-navigation/native
//yarn kullanıyorsanız
yarn install @react-navigation/native

Daha sonra  bağımlılıkları kurmaya devam edelim:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

React Native 0.60 ve üzeri versiyonlarda link işlemi artık otomatik olduğu için react-native link işlemine gerek yok.

Temel Kullanım

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

StackNavigator için kurulum yapalım:

npm install @react-navigation/stack

Kullanımı aşağıdaki gibi olacak:

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

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

export default App;

Sayfalar Arası Geçiş

// In App.js in a new project

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen2</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}
function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen}  options={{ title: 'Overview' }} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Tab Navigator Import

npm install @react-navigation/bottom-tabs

Drawer Navigator Import

npm install @react-navigation/drawer