Şu andayeni projeler kabul ediyoruz.
React Native Sınıf Tabanlı Component Oluşturma
React Native Sınıf Tabanlı Component Oluşturma

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 PHP Storm u tercih ediyorum.
  • Şimdilik Atom ile açacağız



  • 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.


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.






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.



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.