React Native StackNavigator

tarihinde gönderilmiş tarafından

React Native ile sayfalama işlemleri ile ilgili birden fazla method bulunuyor en kullanışlılarından daha doğrusu en çok kullandığım sayfalandırma işlemlerinden birisi StackNavigator dur.

StackNavigator sayfanızda bulunan bir butona yada nesneye tıkladığınız zaman yine sizin daha önceden belirlediğiniz sayfaya kullanıcının yönlendirilmesi işlemidir, DrawerNavigator yada TabNavigator dan farklı olarak bunda yönlendirme sayfaları listelenmez.

Öncelikle kurulumumu sağlayalım

sudo npm install react-navigation --save

import işlemlerimizi gerçekleştirelim

import React from 'react';
import StackNavigator from 'react-navigation';
import {View,Text} from 'react-native';<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

bu işlemden sonra direk yönlendirme işlemlerimizi tanımlayalım ,

const Stack=StackNavigator({
  ikinciSayfa:{screen:ikincisayfa},
  ucuncuSayfa:{screen:ucuncuSayfa}
});

 

sonrasında render methodumuzu yazalım

render(){
    return(<Stack />)
}<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

 

artık sayfalar arasında geçiş yapabiliriz, geçiş işlemlerimiz için hangi nesneye dokununca sayfa geçişi istiyorsanız bu işlem için ilgili nesnenin onPress tanımlamasına ;

()=> navigation.navigate('ucuncuSayfa')

 

şeklinde tanımlama yaparak iligili nesneye dokunulduğunda ucuncuSayfa nesnesine yani sayfasına yönlenecektir , yine buradada eğer bir veri taşımak istiyorsak (‘ucuncuSayfa’,{deger:this.state.deger}) şeklinde taşıma yapabiliriz.