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

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;