Jump to content
×
×
  • Create New...

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

  • Bu Alana Reklam Verebilirsiniz
    Bu Alana Reklam Verebilirsiniz

Örnek Login Uygulaması Projesi Kodları | React Native

Rate this topic


gelistiriciGunlukleri
 Share


Recommended Posts

Örnek Login Uygulaması Projesi Kodları | React Native
 Share


  • Members

Merhaba arkadaşlar, bugün react native ile bir login uygulaması serisine başlıyoruz. Tıpkı İonic ile bir zamanlar yaptığım gibi. İonic için yaptığım seriye de ulaşabilirsiniz.

İş listemiz şöyle:

·        React native'i ile LoginApp adında proje oluşturalım

·        Projede bulunan klasör yapısında bahsedelim

·        İleride kullanacağımız yapıyı oluşturalım

Öncelikle uygulamamı masaüstüne oluşturuyorum.

 

$ cd Desktop/

$ react-native init LoginApp

$ cd LoginApp/

 

Uygulamayı bundan sonra hangi platformda işlem yapacaksanız ona göre derleyebilirsiniz. 

react-native run-android
react-native run-ios

 

ios için macintosh cihazınızın olması gerektiğini unutmayın! Uygulama açıldığında Welcome to React Native! ile sizi karşılıyor. şimdi dosya yapısına bakalım

├── __tests__ : testlerinizi yapabileceğiniz klasör
├── android : android projesinin derlendiği klasör
├── ios : ios projesinin derlendiği klasör
├── node_modules : projenizde kullandığınız tüm modüller
├── index.android.js : uygulamanız eğer android ise buradan başlatılır
├── index.ios.js : uygulamanız eğer ios ise buradan başlatılır
├── package.json : projenizde eklediğiniz bir modülü kaydettiğiniz yer

 

Bir önceki makalemde dediğim gibi ionic'e göre belirli bir design pattern'i yok. O yüzden bu seride bir mimari kullanmıyacağım sıfırdan anlatım yapacağım. Kendi sayfa yapımızı kendimiz oluşturmamız gerekiyor. Ben şuan ios ile çalışacağım o yüzden index.ios.js ile başlıyorum (Not: android ile bir farkı yok sadece başlama noktası burası. İmport ve diğer işlemler aynı zaten böyle olmasaydı hibrit olmazdı :D). index.ios.js

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class LoginReact extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Text style={styles.welcome}>
					Welcome to React Native!
				</Text>
				<Text style={styles.instructions}>
					To get started, edit index.android.js
				</Text>
				<Text style={styles.instructions}>
					Double tap R on your keyboard to reload,{'\n'}
					Shake or press menu button for dev menu
				</Text>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#F5FCFF',
	},
	welcome: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
	},
	instructions: {
		textAlign: 'center',
		color: '#333333',
		marginBottom: 5,
	},
});

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

 

 

Projenin saf hali bu. Şimdi ise kendi klasör yapımızı oluşturalım: 

 

 

  • LoginApp
    • src
      • assets
      • common
      • pages
        • start-page
          • start-page.js
        • main-page
          • main-page.js
        • login-page
          • login-page.js
      • providers
common   : kullanacağımız çeşitli fonksiyonları tutacağımız yer
pages    : sayfalarımızı burada barındırıyoruz
providers: Web service isteklerini ekleyeceğiniz yer olabilir

 

 

Not: bu derste react-native kurulumundan bahsetmedim ben zaten bunları yapmışsınız olarak kabul ediyorum. Bugünkü konu bu kadardı diğer konuda görüşmek üzere. İyi çalışmalar 🙂 sorunuz olursa çekinmeyin sorun.

Edited by gelistiriciGunlukleri

.

Link to comment
Share on other sites


Konu Altı Reklam 1
Konu Altı Reklam 2
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...