06.01. React Navigation Kurulumu

React Navigation, React Native topluluğu tarafından Javascript ortamında yazılmış ve kullanımı kolay bir navigasyon çözümüdür. Bu bölüm, React Navigation kurulumunu içerir. (Örnekler, React Navigation 3.x’e göredir, özellikle internetten bulduğunuz bir örneğin kaç versiyonuna göre olduğuna dikkat edin.)

Öncelikle Native bir proje yaratalım. Eğer Expo kullanırsanız, başlangıçta boş proje mi yoksa navigation içeren proje mi diye soruyor. Eğer navigation içeren proje derseniz, direkt React Navigation’ını kuruyor. Bu bölümde tamamen boş bir projede React Navigation nasıl kuracağımız anlatılacaktır. Öncelikle boş bir proje oluşturalım.

react-native init ProjeIsmi
…
cd ProjeIsmi

react-native init ProjeIsmi

…

cd ProjeIsmi

ProjeIsmi adında klasörümüz oluştuktan ve kurulum bittikten sonra klasöre gidelim. React Navigation kütüphanesini npm veya yarn üzerinden kurabiliriz.

yarn add react-navigation
# veya npm ile
# npm install --save react-navigation

yarn add react-navigation

# veya npm ile

# npm install --save react-navigation

Kurulum bittikten sonra react-native-gesture-handler kuralım.

yarn add react-native-gesture-handler
# veya npm ile
# npm install --save react-native-gesture-handler

yarn add react-native-gesture-handler

# veya npm ile

# npm install --save react-native-gesture-handler

Native bağmlılıkları dosyalara ekleyelim.

react-native link react-native-gesture-handler

1	react-native link react-native-gesture-handler

Android için kurulum yapıyorsanız, MainActivity.java manuel bir şekilde ek kodlar yazmanız gerekecektir. Bu dosya Android/app/scr/main/java/com/ProjeIsmi dizini içindedir.

package com.hellonavigation;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "HelloNavigation";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
                }
        };
    }
}

package com.hellonavigation;

import com.facebook.react.ReactActivity;

import com.facebook.react.ReactActivityDelegate;

import com.facebook.react.ReactRootView;

import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

@Override

protected String getMainComponentName() {

return "HelloNavigation";

}

@Override

protected ReactActivityDelegate createReactActivityDelegate() {

return new ReactActivityDelegate(this, getMainComponentName()) {

@Override

protected ReactRootView createRootView() {

return new RNGestureHandlerEnabledRootView(MainActivity.this);

}

};

}

İşaretli satırları ekledikten sonra emulator’ünüz açıkken “react-native run-android” diyerek çalıştırmayı deneyin. Ben bu bölümde bir hata ile karşılaştım. (Linux ve iOS kullanıcıların hata ile karşılaşmasını beklemiyorum.) Karşılaştığım hata:

settings file 'D:\…\HelloNavigation\android\settings.gradle': 3: unexpected char: '\' @ line 3, column 133.
     s\react-native-gesture-handler\android')

1 2	settings file 'D:\…\HelloNavigation\android\settings.gradle': 3: unexpected char: '\' @ line 3, column 133. s\react-native-gesture-handler\android')

Aslında hata basit, yine de stackoverflow’dan baktım. “\” beğenmemiş. Bu dosyaya gidip üçüncü satıra baktığımda:

project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')

1	project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')

“\” ları “/” çevirdim. Yeni hali:

project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

1	project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

Kaydedin ve tekrar çalıştırmayı deneyin, eğer proje sonucunu emulator’de gördüğü iseniz çalışmaya devam edebilirsiniz.