React-Navigation 4.0 Kullanımı

Daha önce react-native ile ilgili bir çok uygulama yaptık. Mobil uygulamalarda en önemli konulardan bir de sayfalar arası geçişler yani routing mekanizmasıdır. React Navigation’da tam bu noktada karşımıza çıkıyor. React native uygulamalarımızda sayfalar arası geçişi (routing), modal kullanımını ve uygulama header yönetimini bu npm paketi ile yapabiliyoruz.

React tarafında en çok kullanılan routing yapısıdır. Github repo’su 17k ‘nın üzerinde star almıştır. Kullanımı da çok pratiktir fakat doğru konumlandırma yapılmaz ise çok baş ağrıtır.

Her yazımızda olduğu gibi bu yazımızda da örnek bir uygulama ile konuyu inceleyelim.

Önceklikle boş bir react-native uygulaması oluşturalım.

react-native init ReactNav

Aşağıdaki komut ile npm üzerinden react-navigation’ı kuralım.

npm install react-navigation

react-navigation kullanımı için diğer aşağıdaki 3 npm paketini yükleyelim.

npm i react-native-reanimated react-native-gesture-handler react-native-screens

React-Native 0.60 versiyonu ve üzeri kullandığımız için pod dosyalarımızı instal edelim

cd ios
pod install

Android cihazlar için android/app/build.gradle dosyasında dependencies kısmına aşağıdaki paketleri ekliyoruz.

implementation 'androidx.appcompat:appcompat:1.1.0-rc01' implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

Evet son olarak aşağıdaki kütüphanemizi de install ederek kurulumu tamamlıyoruz.

npm install react-navigation-stack

Şimdi uygulamamıza geçebiliriz. Öncelikle ./Page dizinine iki tane component (sayfa) oluşturuyoruz.

HomeScreen Component:

DetailScreen Component:

Şimdi uygulamanın başladığı App.js dosyasını editleyelim. Öncelikle kullanacağımız npm paketlerini ve oluşturduğumuz sayfaları import edelim.

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import DetailsScreen from './Page/Details'
import HomeScreen from './Page/Home'

RootStack değişkeni oluşturarak import ettiğimiz createStackNavigation’a örnek sayfalarımızı parametre olarak geçiyoruz.

const RootStack = createStackNavigator(
 {
  Home: HomeScreen,
  Details: DetailsScreen,
 },
 {
  initialRouteName: 'Home',
 }
);

Ardından AppContainer değişkeni oluşturarak oluşturduğumuz RootStack’i import ettiğimiz createAppContainer’a parametre olarak veriyoruz.

const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

En sonunda ise App Component’in içinde oluşturduğumuz AppContainer’ı return ediyoruz. Şimdi uygulamamızı çalıştırabiliriz.

npm start
react-native run-ios

Evet gördüğünüz gibi uygulamamız içinde sayfa geçişleri çalışıyor.

Parameters

Peki iki sayfa arasında veri taşımak istersek nasıl bir yol izlemeliyiz bir örnek üzerinde inceleyelim.

HomeScreen sayfasında oluşturduğumuz button’un eventini aşağıdaki kod ile değiştirelim. Örnekte de görüldüğü üzere navigate methodunun ilk parametresi route edilecek sayfanın adı ikinci parametre ise gönderilecek veriyi temsil ediyor.

onPress={() => this.props.navigation.navigate('Details', {
  user: 'Abdulkerim Karaman'
})}

Peki DetailScreen sayfasında bu veriyi nasıl yakalarız. O kısmı da gayet kolay.

Sayfanın props’unda yer alan navigation.getParam() methodunu kullanarak istediğimiz veriyi alabiliriz. (Burada dikkat etmemiz gereken nokta veriyi gönderirken user değişkenine atamıştık yine okurken de aynı değişken ismi ile okuyoruz.)

Configuring Header Bar

Uygulama Header Bar’ın background, title, button v.s. bilgilerini değiştirmek isterseniz değiştirmek istediğiniz sayfanın içine navigationOptions objesi oluşturmanız yeterli.

Yaptığımız değişikliğin çıktısı aşağıdaki gibidir.

Eğer oluşturduğunuz her sayfada Header’a müdahale etmek istemiyorsanız App.js içinde default (defaultNavigationOptions) olarak bunu tanımlayabilirsiniz.

Header Buttons

Eğer Header’a button eklemek isterseniz aşağıdaki örneğe göz atabilirsiniz.

static navigationOptions = {
 headerRight: () => (
  <Button
   onPress={() => alert('This is a button!')}
   title="Button"
   color="#fff" />
 ),
};

Full Screen Modal

Sayfaların full screen modal olarak açmak isterseniz yukarıda tanımladığımız RootStack objesinin içine aşağıdaki kodu ekleyebilirsiniz.

{
 mode: 'modal',
 headerMode: 'none',
}

Evet geldik bira makalenin daha sonuna :)

Repo:

akaramanapp/ReactNav

Faydalı olması dileğiyle hoşçakalın..