Minimum Gereksinimler
react-native >= 0.63.0
expo >= 41 (Eğer expo kullanıyorsanız)
typescript >= 4.1.0 (eğer typescript kullanıyorsanız)

Kurulum

İlk önce gerekli paketleri kurmamız gerekiyor ve bunun için yarn veya node paket yöneticinizin yüklü olması gerekiyor. Eğer yüklü değil ise npm için https://nodejs.org buradan indirebilirsin.

Npm kullanıyorsanız

npm install @react-navigation/native

Yarn kullanıyorsanız

yarn add @react-navigation/native

Eğer expo kullanıyorsanız bağımlılıkları aşağıdaki gibi yükleyebilirsiniz.

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

Daha sonra ise bu bağımlılıkları da eklememiz gerekiyor.

Npm kullanıyorsanız

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

Yarn kullanıyorsanız

yarn add react-native-screens react-native-safe-area-context

Eğer bir ios cihazda çalıştıracaksanız cocoa pod paketlerini de kurmanız gerekiyor. Bunun içinde aşağıdaki kodu proje dizininde çalıştırınız.

npx pod-install ios

Eğer android cihazda çalıştıracaksanız MainActivity.java içindeki dosyada düzenleme yapmanız gerekli. Bunun için; android/app/src/main/java/<projeAdınız>/MainActivity.java dosyasına gidip;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

ve üst kısımda yer alan import dosyalarının yanına aşağıdaki kodu ekleyiniz.

import android.os.Bundle;

Ve şimdi de uygulamanızı bu navigation içerisine almanız gerekiyor. Tıpkı aşağıdaki kodda olduğu gibi.

App.js

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

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

Peki burada bitti mi? Sayfalar arası nasıl geçiş yapacaksınız?

Sayfa Geçişi

Sayfa geçişi için stack yapısını kurmanız gerekiyor. Bunun için ise tekrardan bir paket kuracağız.

Npm kullanıyorsanız

npm install @react-navigation/native-stack

Yarn kullanıyorsanız

yarn add @react-navigation/native-stack

Ayrıca paketleri yükledikten sonra geçerli olması için projeyi baştan başlatmanız gerekiyor.

Android için

npx react-native run-android

Ios için

npx react-native run-ios

Veee yapımız hazır. Örnek kod aşağıdadır. Eğer hala beceremdiyseniz benimle iletişime geçebilirsiniz. Test etmek için Tıklayın

App.js

// 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 { createNativeStackNavigator } from '@react-navigation/native-stack';

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

const Stack = createNativeStackNavigator();

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

export default App;