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

İş listemiz şöyle:

• index.ios.js dosyasının sayfalarımıza bağlayacağız

• Sayfalar arasında geçişleri yapacağız

• Sayfaların tasarımlarını yapacağız

Öncelikle index.ios.js'i değiştirelim tüm navigate işlemini orada yapmamız gerekiyor. index.ios.js

import React, { Component } from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	View,
	Navigator // navigator import etmemiz gerekir
} from 'react-native';


import LoginPage from './src/pages/login-page/login-page'; // gezinmek istediğimiz sayfaları import etmemiz gerekir
import MainPage from './src/pages/main-page/main-page';
import StartPage from './src/pages/start-page/start-page';

export default class LoginApp extends Component {

	// bu Navigator'e ait bir attirbute çalıştıran fonksiyon
	renderScene (route, navigator) {
		var routeId = route.id; // hangi route olduğunu id altına atıyoruz
		if (routeId === 'Login') {
			return (
				<LoginPage
					navigator={navigator} // açılan pencerenin parametreler göndermek isterseniz bunu yazarsınız
				/>
			);
		}
		if (routeId === 'Main') {
			return (
				<MainPage
					navigator={navigator}
				/>
			);
		}
		if (routeId === 'Start') {
			return (
				<StartPage
					navigator={navigator}
				/>
			);
		}
	}


	render() {
		return (
			<Navigator
				initialRoute={{ // Bu uygulamanın ilk açılacak view'ını belirler
					id: 'Start',
					name: 'Index'
				}}
				renderScene={ // bu ise navigator değişkenini bind eder
					this.renderScene.bind(this)
				}
			/>
		);
	}

}

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

Burada Navigatorden bahsettim işte orada tüm sayfaları gösterici bir yapı var. Diğer sayfaları kullandıkça olayı anlayacaksınız.

Hata verebilir çünkü daha login-page.js, main.page.js ve start-page.js oluşturulmadı. İlk önce login-page.js i oluşturalım oraya react native'in dokümanına bakarak bir tasarım yapmamız gerekiyor. src/pages/login-page/login-page.js

import React, { Component } from 'react';

import {
	AppRegistry,
	StyleSheet,
	Text,
	View,
	TextInput, // girdiler için
	Button // tıklamak için
} from 'react-native';

export default class LoginPage extends Component {

	constructor(props) {
		super(props); // super arguman geçmenizi sağlar eğer constructor kullanmak isterseniz kullanmak zorunlu oluyor.
		this.navigator = this.props.navigator; // index.ios.js de navigator diğer geçtiğimizi burada aldık
	}

	// giriş isteği atacağımız ve yükleceğimiz fonksiyon
	goLogin() {

	}

	render() {
		return (
			<View
				style={{
					flex: 1,
					flexDirection: 'column',
			        justifyContent: 'center',
			        padding: 15
				}}>
				<View>
					<TextInput
						style={{
							height: 50
						}}
						placeholder="Kullanıcı adı"/>
				</View>
				<View>
					<TextInput
						style={{
							height: 50
						}}
						placeholder="Şifre"/>
				</View>
				<View
					style={{
						height: 50
					}}>
					<Button
					  	title="Giriş" // butonun yazısı
					  	color="#4285f4" // arkaplan rengi
					  	onPress={this.goLogin.bind(this)} /* butona tıklandığında tetiklenecek fonksiyon*/ />
				</View>
			</View>
		);
	}
}

Şimdide main-page.js'i oluşturalım burada fazla bir işlem yapmayacağız sadece yönlendirme için kullanacağız burayı istediğiniz gibi şekillendirebilirsiniz. src/pages/main-page/main-page.js

import React, { Component } from 'react';

import {
	Text
} from 'react-native';

export default class MainPage extends Component {
	render() {
		return(
			<Text style={{marginTop: 20}}>Burası MainPage</Text>
		);
	}
} 

start-page.js'ide yapalım. src/pages/start-page/start-page.js

import React, { Component } from 'react';

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

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

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

Start da yükleniyor kullandım bir tasarıma ihtiyaç duymadım çünkü.

Bugünkü konu bu kadardı, zaten yolları belirleyecektik diğer derste görüşmek üzere. İyi çalışmalar.

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