React Native Sınıf Bileşen ve Fonksiyon Bileşen

2 dakika okuma süresi


4006
4006 puan

React native bileşeni oluşturacaksanız diyelim bunu bir sınıf veya bir fonksiyon şeklinde yazarak oluşturabiliriz. Örneğin basit olarak Hello.js adında merhaba yazsını yerleştireceğimiz bir bileşen olarak kullanacağımız sayfamızı oluşturalım.

Eğer Vscode kullanıyorsanız ES7 React/Redux/GraphQL/React-Native snippets eklentiyi kurarak bunu rnc ve rnf kısaltılmış söz dizimlerini kullanarak kolayca sağlayabilirsiniz.

rnc kısaltması sizin için o dosyaya ait bir react native class’ı oluşturur. rnf kısaltması ise o dosyaya ait bir react native fonksiyonu oluşturur.

Sınıf Kullanarak

Hello.js adında sayfamıza geçelim ve rnc yazıp “TAB” tuşuna basalım. Eğer Vscode kullanmıyorsanız ve bahsettiğim eklenti sizde yoksa kendiniz aşağıdaki yapıyı yazmanız gerekmektedir.

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

export default class Hello extends Component {
    render() {
        return (
            <View>
                <Text> textInComponent </Text>
            </View>
        )
    }
}

bizim için bu taslağı direkt olarak getirir. Görüldüğü üzere sayfamızın adı Hello idi ve direkt class Hello yapısını bizim için oluşturdu. Basit bir örnek ile uzatmayacağım için yapmam gereken tek şey bu bileşenin merhaba demesi olacağından Text bileşenim içerisindeki yazıyı merhaba olarak değiştiriyorum.

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

export default class Hello extends Component {
    render() {
        return (
            <View>
                <Text> Merhaba </Text>
            </View>
        )
    }
}

Fonksiyon Kullanarak

Hello.js sayfamıza geçelim (temiz bir sayfa başlangıcı yaptığımızı farz ederek) ve rnf yazarak “TAB” tuşuna basalım. Eğer Vscode kullanmıyorsanız ve bahsettiğim eklenti sizde yoksa kendiniz aşağıdaki yapıyı yazmanız gerekmektedir.

import React from 'react'
import { View, Text } from 'react-native'

export default function Hello() {
    return (
        <View>
            <Text></Text>
        </View>
    )
}

bizim için bu taslağı direkt olarak getirecektir. Görüldüğü üzere sayfamızın adı Hello idi ve bize Hello isminde bir fonksiyon içerisinde bileşeni oluşturmamızı sağladı. Yukarıda bahsettiğim amacı sağlamak için yine Text bileşenim içerisine merhaba yazıyorum.

import React from 'react'
import { View, Text } from 'react-native'

export default function Hello() {
    return (
        <View>
            <Text>Merhaba</Text>
        </View>
    )
}

ve evett bileşenimiz amacına uygun olarak artık kullanılmaya hazır. Bu bileşeni gerekli sayfalara import edebilir ve kullanabiliriz.

Bu yazıda temel amacım bir bileşen veya ekranın sınıf olarak veya fonksiyon olarak nasıl oluşturulabileceği idi.

Burada dikkat edilmesi gereken fonksiyon içerisinde bileşenlerimizi direkt return() ederken sınıf içerisinde render(){} içerisinde return() etmemizdi.

export default söz kullanımı ise bileşeni diğer sayfalarda da kullanabilmek için dışarıya açmamızı sağlıyor onu fonksiyon veya sınıfımızın başına değil de sayfamızın aşağısına da yazabilirdik ve o bileşeni diğer sayfalar için kullanıma açabilirdik.

Örneğin;

export default Hello

Sevdin mi? Ee arkadaşlarınla paylaşsana :)

4006
4006 puan

Tepkiniz Nedir?

Havalı he Havalı he
233
Havalı he
Çoh İyi Çoh İyi
210
Çoh İyi
SSARDI SSARDI
186
SSARDI
Hayırlısı Bilader Hayırlısı Bilader
163
Hayırlısı Bilader
Yok Artık! Yok Artık!
116
Yok Artık!
Melih Çelik

0 Comments

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bir İçerik Türü Seçin
Kişisel Test
Kişilik hakkında bir şeyler çıkartmak için sorular hazırla
Önemsiz Bilgi Yarışması
Bilgiyi kontrol etmeyi amaçlayan doğru ve yanlış cevapları olan bir dizi soru hazırla
Oylamaca
Karar vermek veya seçenekleri belirlemek için oylat
Hikâye
Görsel ve metinlerin gücünü kullanın ve hikayenizi paylaşın
Liste
Klasik internet listeleri
Geri Sayım
Klasik internet geri sayımları
Açık Liste
Kendi ögeni gönder ve en iyi gönderim için oy ver
Sıralanmış Liste
Yukarı veya aşağı oy ver listenin en iyi maddesini seç
Mim
Resim yükleyin ve kendi mimlerinizi oluşturun
Video
YouTube veya Vimeo videoları paylaşın
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format