React Native Sınıf Tabanlı Component Oluşturma

React Native Component Live Reload

Merhaba,

İlk uygulamamız ile başlayalım.Aslına bir önceki yazımızda ilk uygulamamızı oluşturmuştuk ismini de “denemeproje” olarak koymuştuk.

Bu yazımızda bir liste Component`i oluşturacağız.Component`leri oluşturduğumuzda istediğimiz sayfada çekerek gerekli yerde istediğimiz butonu,listeyi,başlığı gösterebiliriz.

İlk olarak Listem Component`i oluşturalım.

  • Proje dosyalarımızı Notepad++ veya Atom gibi bir editörde açıyoruz.Ben Atom u tercih ediyorum.
React Native Projeyi Atom da açma
React Native Projeyi Atom da açma
  • Soldaki listede gördüğünüz gibi “src” isimli bir source(kaynak) klasörü oluşturuyoruz.İçerisine “components” isimli bir klasör daha oluşturuyoruz.
  • Sırasıyla src>components klasörlerinin içine listem.js adlı component dosyamızı oluşturuyoruz.
React Native Component Dosyası Atomda Oluşturma
React Native Component Dosyası Atomda Oluşturma

Alttaki kodları içerisine ekliyoruz.Devamında Listem Component`i içerisindeki kodları tek tek inceleyeceğiz.

import React, { Component } from ‘react’;
import { View, Text } from ‘react-native’;


Bu iki satır bizlere bu dosyanın bir React Native dosyası olduğunu Component oluşturacağımızı,View ve Text gibi Basic Component kullandığını belirtir.

class Listem extends Component

Class yani Sınıf Tabanlı bir Custom(Özel) Component oluşturmak için “Listem” ismini veriyoruz ve bu Component`i extends ederek genişletiyoruz.

Class içerisindeki alttaki kodlar bu Component içindeki kodların render edilmesini ve geriye bir return dönmesini bunun da ikinci satırda olan View ve Text Basic Component`leri ile yapıldığını belirtir.

render() {
    return (
      <View>
        <Text>Liste Componentim</Text>
      </View>
 
   );
  }

export default Listem;

En son olarak ta Listem Component`ni export ederek dışarı çıkarıyoruz ve kullanılmak üzere hazırlıyoruz.

Arkadaşlar bu kısma kadar yaptığımız aslında şu;
Bizler bu Listem Component`ini kullandığımızda(herhangi bir sayfada çağırdığımızda) Sınıf tabanlı Class içerisindeki kodları çalıştıracaktır.Yani Ekranan Text olarak “Liste Componentim” yazacaktır.

Custom Component Kullanımı

Component`i oluşturduktan sonra App.js dosyasını açıyoruz ve alttaki kullanım ile Listem Component`ini önce bu anasayfa dosyasına çağırıyoruz ve gösteriyoruz.Bunun için alttaki kodları kullanıyoruz.

import Listem from './src/components/listem';
.
.
.
.
.
    return (
      <View>
      <Header headerText={'Örnek Uygulamam'}/>

      <Listem/>
      </View>
    );

Yukarıdaki kodları incelerseniz önce import ederek(5.Satır) App.js de Listem Component`ini çağırdık ve “<Listem/>” ile çağırdık(15.Satır) ve kullandık

App.js Tam Hali

Uygulamamızı XCode ile açıp build ettimizde örnek uygulamamız alttaki gibi çıkacaktır.

React Native Component Live Reload
React Native Component Live Reload

Bunları da beğenebilirsin