React Native Örnek Login Uygulaması #2 - Navigator ile Yolların Belirlenmesi

react-nativereact-native-login-uygulamasıyoutube

2 yıl önce 4 yorum

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

Yorumlar ({{totalCommentCount}})

  • Hulusi

    {{commentLike20Count}} beğenme 2 yıl önce

    import SignupPage from '../signup-page/singup-page.js'; export default class Login extends Component { goLogin() { var present = this; present.props.navigator.push({ id: 'SignupPage', name: 'SignupPage' }); } .... <TouchableOpacity activeOpacity={.5} > <View> <Text style={styles.signupLinkText}>Kayıt Ol</Text> </View> </TouchableOpacity> Merhabalar, yazıya tıklayınca farklı bi sayfaya yönlendirme yapmak istiyorum. Yukarıdaki kodda ne sıkıntı var :) Teşekkürler
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike24Count}} beğenme 2 yıl önce

    Merhaba, Galiba bir Kayıt sayfası yapmaya çalışıyorsun. Kodun Tamamını göremediğimden bir şey diyemiyorum :( İstersen https://github.com/abdurrahmanekr/bana-istedigini-sor/issues buraya bir issue aç sana yardımcı olayım
    Beğen Beğendin
  • Mezahir

    {{commentLike45Count}} beğenme 1 yıl önce

    react-native-depreacted-custom-componenet hatasi aliyorum... yardimci olursaniz sevinirim
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike46Count}} beğenme 1 yıl önce

    Merhaba Mezahir, bu sorunu bu adreste çözüme getirdik: https://github.com/abdurrahmanekr/bana-istedigini-sor/issues/14
    Beğen Beğendin
  • Düşündüklerin nedir ?

    Abdurrahman Eker

    (1010 Eylül 11111001100)

  • Full Stack Developer at Detaysoft Turkey/Sivas
  • İnternette Avare Kodcu
  • github
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?