06.02. Merhaba React Navigation

Navigation görünümleri nagivation.state tarafından belirtilen bir router ve bir navigation prop alan ve çeşitli ekranları görüntüleyebilen sunum bileşenleridir. Bu sunum bileşenleri 6’a ayrılabilir. Bu bölüm, StackView kullanılarak React Navigation dünyasına merhaba diyeceğiz.

StackView : stack tarzı çalışan bir navigasyon bileşeni
- StackViewCard : Kart destesinden bir kart (gestures kullanır, kısacası bu kütüphaneye ihtiyacı vardır.)
- Header : Kart stack için başlık görünümü
SwitchView : Her seferinde yalnızca bir ekran görüntüleyen ve özellikle kimlik doğrulama akışları için kullanışlı bir navigation.
Tabs : Yapılandırılabilir bir sekme değiştirici / sayfalayıcı
Drawer – Soldan kayan çekmeceli görünüm (Navigasyon menüsü gizlidir, soldan sağa kaydırma ile açılır)

Sunum bileşenlerinden createStackNavigator fonksiyonunu kullanıp bir Stack Navigator örneği ile bu dünyaya merhaba diyelim. createStackNavigator bir React bileşeni döndüren bir fonksiyondur. Yönlendirmeyi içeren bir ayar bölümüne sahiptir. screens isminde bir klasör açıp AppNavigator.js dosyasını yaratıp aşağıdaki kodları yazalım.

import { createStackNavigator, createAppContainer} from 'react-navigation';
import Home from './Home';
import Ekran2 from './Ekran2';

const AppNavigator = createStackNavigator({
   Home: { screen: Home },
   Ekran2: {screen: Ekran2}
});

const App = createAppContainer(AppNavigator);

export default App;

import { createStackNavigator, createAppContainer} from 'react-navigation';

import Home from './Home';

import Ekran2 from './Ekran2';

const AppNavigator = createStackNavigator({

Home: { screen: Home },

Ekran2: {screen: Ekran2}

});

const App = createAppContainer(AppNavigator);

export default App;

İlk satır, react-navigation kütüphanesi eklenip kullanılacak modüller seçiliyor. İkinci ve üçüncü satırlar, aynı klasörde bulunan .js uzantılı dosyaları eklememizi sağlıyor. Bu dosyalar içinde ekran çıktıları var. AppNavigator değişkeni createStackNavigator dönen değeri tutuyor. Bu Stack uygulamasında Home ve Ekran2 adında iki sayfa mevcuttur. Ardından createAppContainer fonksiyonu içine dönen değer gönderiliyor ve bu dosyanın export edilen default değeri oluyor. Şimdi Home.js dosyasını yaratalım ve bu dosya içinden Ekran2 dosyasının dönen içeriğini görüntüleyelim.

Ekranlar arası dolaşma: Home.js örneği

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

type Props = {};
export default class Home extends Component<Props> {
  render() {
    return (
      <View>
        <Text>Merhaba React Navigation!</Text>
        <Text>Bu ekran ana ekran...</Text>
        <Button
          title="Ekran 2'ye git..."
          onPress={() =>
            this.props.navigation.navigate('Ekran2')
          }
        />
      </View>
    );
  }
}

import React, {Component} from 'react';

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

type Props = {};

export default class Home extends Component<Props> {

render() {

return (

<View>

<Text>Merhaba React Navigation!</Text>

<Text>Bu ekran ana ekran...</Text>

<Button

title="Ekran 2'ye git..."

onPress={() =>

this.props.navigation.navigate('Ekran2')

}

</View>

);

}

Bir Button bileşeninin OnPress olayının içine bir arrow fonksiyonu yazalım. Bu fonksiyon “this.props.navigation.navigate(‘Ekran2’)” ifadesi sayesinde Ekran2 sayfasına erişmemizi sağlar. Aynı şekilde Home sayfasına geri dönebilir veya başka sayfalara ulaşabilirsiniz. Stack kelimesi bu bölümde kafa karıştırmış olabilir. Ancak, uygulamayı çalıştırdığımızda üste oluşmuş “<-” şeklinde son geldiğiniz sayfaya gitmenizi sağlayan bir button bileşeni oluşmuştur. Bu Button sayesinde önceki sayfalara dönüş yapabilirsiniz.

Uygulamayı çalışır hale getirme

Ekran2.js oluşturalım.

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

type Props = {};
export default class Ekran2 extends Component<Props> {
  render() {
    return (
      <View>
        <Text>2. ekran...</Text>
        <Button
          title="Ana ekrana git..."
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

import React, {Component} from 'react';

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

type Props = {};

export default class Ekran2 extends Component<Props> {

render() {

return (

<View>

<Text>2. ekran...</Text>

<Button

title="Ana ekrana git..."

onPress={() =>

this.props.navigation.navigate('Home')

}

</View>

);

}

Kök dizinde ilk çalışan dosya olan index.js dosyasını aşağıdaki gibi düzenleyelim.

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

import {AppRegistry} from 'react-native';

import App from './App';

import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js dosyası:

import React from 'react';
import AppNavigator from './screens/AppNavigator';

export default class App extends React.Component {
  render() {
    return (
      <AppNavigator/>
    );
  }
}

import React from 'react';

import AppNavigator from './screens/AppNavigator';

export default class App extends React.Component {

render() {

return (

);

}

Artık örneği çalıştırabilirsiniz.