Merhaba arkadaşlar kaldığımız yerden devam ediyoruz.

İş listemiz şöyle

• Artık giriş yaptığına ve main'e ulaştığında localStorage'e gelen tocken'ı kaydedeceğiz

• Önceden kullandığımız navigator elementi yerine router-flux kullanımını uygulayacağız.

Artık start-page.js ile kullancının giriş yapma durumuna göre yönlendirme yapmamız gerekiyor. start-page.js'e geçmeden önce kullacının giriş yapıp yapmadığını döndüren isLogin adında bir fonksiyonu ve setSessionTicket adında giriş ticket parametresini kayıt eden fonksiyonu common/index.js'e yazıyoruz. 

export async function isLogin() {
	var session = await AsyncStorage.getItem("session_ticket");
	if (session != null)
		return true;
	return false;
}

export async function setSessionTicket(ticket) { // giriş yapınca gelen değeri kayıt ediyoruz
	AsyncStorage.setItem("session_ticket", ticket);
}

async olan bir fonksiyonun içinde await kullanılabilir. Bunlar ne peki ? Javascript asenkron bir programlama dilidir. Uzun sürecek bir istekte mesela bir server request, bunu beklemez diğer satıra geçer. Burada await bize bunun bir gecikme olduğunu belirterek diğer satıra geçmemizi engelliyor. O işlem bitene kadar o satırda bekliyor.

Server bize giriş yapınca parametre gönderecek session_ticket adında. Bi ileride artık servis ile ilgili ne göndereceksek bu ticket'ı kullanacağız. Şimdi gelen ticket'ı kontrol edeceğiz ve kayıt edeceğiz. Bunu login-page.js de yapabiliriz.

/* ... login-page.js ... kısa olsun diye yorumlandı */
.then((res) => {
	if (res.session_ticket)
		setSessionTicket(String(res.session_ticket)); // burada kaydediyoruz

	if (res.result != -1)
		Actions.MainPage({type: 'reset'});
	else 
		Alert.alert("Kullanıcı doğrulanamadı");
})

/* ... */

Tamam artık start-page'de bu kontrolü yapmanın zamanı geldi. src/pages/start-page/start-page.js

import React, { Component } from 'react';

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

import {
	isLogin
} from '../../common/index';

export default class StartPage extends Component {
	
	constructor(props) {
		super(props);

		this.isLoginControl();
	}

	async isLoginControl() {
		var present = this;
		isLogin().then((res) => {
			if (res)
				present.props.navigator.push({ // yaptıysa main
					id: 'Main',
					name: 'Main'
				});
			else 
				present.props.navigator.push({ // yapmadıysa login
					id: 'Login',
					name: 'Login'
				});

		})
	}

	render() {
		return(
			<View
				style={{
					flex: 1,
					flexDirection: 'column',
					alignItems: 'center',
					justifyContent: 'center'
				}}>
				<Text>Yükleniyor..</Text>
			</View>
		);
	}
} 

Evet yönlendirmeler ve uygulamamız bitmiş durumda ama 2. görevimiz bitmedi.

React Native Router Flux Nedir ?

React native'de sayfalar arası geçmemizi sağlayan bir eklenti. Navigator ne güne duruyordu ? biz Router Flux kullanıyoruz. Şöyleki: Bizim uygulamamızda main'e yapılan yönlendirmede geri tuşuna basınca veya sola doğru çekince bir önceki sayfaya geri geldi. Bunu önlemek için Navigator değişkeninde oynamalar yapılarak çözüme ulaşılabilir. Ama neden daha iyi bir yapı varken onu kullanmıyoruz. Flux da yönlendirmeler kolay olduğu için onu anlatacağım. Yapmamız gereken şey npm ile kurmak. Github sayfasında yazdığı gibi. 

npm i react-native-router-flux --save

Paket kuruldu. index.ios.js de bulunan yapıyı çevirelim hemen.

/* kısa olsun diye yorumlandı */
import {Actions, Scene, Router} from 'react-native-router-flux';
/* kısa olsun diye yorumlandı */
export default class LoginApp extends Component {

	render() {
		const scenes = Actions.create(
		  <Scene key="root">
		    <Scene key="StartPage" component={StartPage}/>
		    <Scene key="LoginPage" component={LoginPage}/>
		    <Scene key="MainPage" component={MainPage}/>
		  </Scene>
		);

		return <Router scenes={scenes}/>
	}
}

AppRegistry.registerComponent('LoginApp', () => LoginApp);

Burada 3 tane sayfa tanımladık. Şimdi düzenlememiz gereken yerleri değiştirelim. start-page.js'de yapılan yönlendirmeler

/* kısa olsun diye yorumlandı */
import {Actions, Scene, Router} from 'react-native-router-flux';
/* kısa olsun diye yorumlandı */

export default class StartPage extends Component {
	
	constructor(props) {
		super(props);

		this.isLoginControl();
	}

	async isLoginControl() {
		var present = this;
		isLogin().then((res) => {
			if (res)
				Actions.MainPage({type: 'reset'}); // type reset geçmişi temizler 
			else 
				Actions.LoginPage({type: 'reset'});
		})
	}
/* kısa olsun diye yorumlandı */

login-page.js'de yapılan yönlendirmeler

/* kısa olsun diye yorumlandı */
.then((res) => {
	if (res.session_ticket)
		setSessionTicket(String(res.session_ticket));

	if (res.result != -1)
		Actions.MainPage({type: 'reset'}); // giriş yapınca yine reset yapıyor
	else 
		Alert.alert("Kullanıcı doğrulanamadı");
})
/* kısa olsun diye yorumlandı */

Evet arkadaşlar seri bitti :) Anlamadığınız noktalarda yardım isteyin kesinlikle yardım ederim. Diğer konularda görüşmek üzere iyi çalışmalar :)

Not: Bu eğitim serisinin videolarına buradaki linkten erişebilirsiniz. Projenin çalışır halini github'daki profilimde bulabilirsiniz