React Native Temel Bileşenlerini Öğrenmek: Mobil Uygulama Geliştirmenin Yapı Taşları

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

const MyComponent = () => {
  return (
    
  );
};

export default MyComponent;

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

const Greeting = (props) => {
  return (
    
  );
};

const App = () => {
  return (
    
  );
};

export default App;

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

const Counter = () => {
  const [count, setCount] = useState(0); // count adında bir state ve onu güncelleyen setCount fonksiyonu

  return (
    
  );
};

export default Counter;

etiketine benzer şekilde çalışır. Diğer bileşenleri düzenlemek, gruplamak ve stil vermek için bir kapsayıcı olarak kullanılır. View bileşenleri, Flexbox layout sistemi ile birlikte çalışarak güçlü ve esnek UI düzenleri oluşturmanıza olanak tanır.

Özellikleri:
* Stil: backgroundColor, padding, margin, flexDirection gibi birçok stil özelliğini destekler.
* İç İçe Kullanım: Diğer View‘leri ve diğer tüm bileşenleri içerebilir.

Örnek:

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

const AppContainer = () => {
  return (
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Yatay düzen
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  box1: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
  box2: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default AppContainer;

Text: Metin Görüntüleme

Text bileşeni, uygulamanızda metin görüntülemek için kullanılır. Tüm metinler bir Text bileşeni içinde yer almalıdır; doğrudan bir View içine metin yazamazsınız. Text bileşeni, iç içe metinler için de kullanılabilir ve bu, metnin farklı bölümlerine farklı stiller uygulamanızı sağlar.

Özellikleri:
* Stil: fontSize, color, fontWeight, textAlign gibi metinle ilgili birçok stil özelliğini destekler.
* İç İçe Metinler: İç içe Text bileşenleri, üst bileşenin stilini miras alabilir veya kendi stilini geçersiz kılabilir.

Örnek:

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

const TextExample = () => {
  return (
    
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  baseText: {
    fontSize: 16,
    color: '#333',
  },
  boldText: {
    fontWeight: 'bold',
    color: 'navy',
  },
  italicText: {
    fontStyle: 'italic',
    color: 'green',
  },
});

export default TextExample;

Image: Resim Görüntüleme

Image bileşeni, uygulamanızda resim görüntülemek için kullanılır. Hem yerel kaynaklardan (uygulama paketi içinde) hem de ağdan (URL üzerinden) resim yükleyebilir.

Özellikleri:
* source: Resmin kaynağını belirtir. { uri: 'http://...' } veya require('./path/to/image.png') şeklinde olabilir.
* resizeMode: Resmin boyutlandırılma şeklini kontrol eder (cover, contain, stretch, repeat, center).
* style: width, height, borderRadius gibi stil özellikleri.

Örnek:

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const ImageExample = () => {
  return (
    
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 20,
  },
  remoteImage: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
  },
  localImage: {
    width: 120,
    height: 120,
    borderRadius: 60, // Yuvarlak resim
  },
});

export default ImageExample;

Yerel resimler için require() kullanırken, resmin projenin assets klasörü gibi bir yerde olduğundan emin olun.

TextInput: Kullanıcı Girişi Alma

TextInput bileşeni, kullanıcılardan metin girişi almak için kullanılır. Formlarda, arama çubuklarında ve diğer metin tabanlı etkileşimlerde temel bir rol oynar.

Özellikleri:
* value: Giriş alanının mevcut değeri. Genellikle bir state değişkeniyle bağlanır.
* onChangeText: Metin her değiştiğinde çağrılan bir geri arama fonksiyonu.
* placeholder: Giriş yapılmadığında görünen gri metin.
* keyboardType: Sanal klavye türünü ayarlar (default, numeric, email-address, vb.).
* secureTextEntry: Şifre gibi hassas veriler için metni gizler.

Örnek:

import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';

const TextInputExample = () => {
  const [text, setText] = useState('');

  return (
    
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 10,
    marginBottom: 20,
  },
  displayText: {
    fontSize: 18,
  },
});

export default TextInputExample;

Button: Basit Düğme

Button bileşeni, basit ve standart bir düğme oluşturmak için kullanılır. Platforma özgü bir görünüm sunar (Android’de Material Design, iOS’te Cupertino).

Özellikleri:
* title: Düğmede görüntülenecek metin.
* onPress: Düğmeye basıldığında çağrılan fonksiyon.
* color: Düğmenin rengi (platforma göre farklılık gösterebilir).
* disabled: Düğmeyi devre dışı bırakır.

Örnek:

import React from 'react';
import { View, Button, Alert, StyleSheet } from 'react-native';

const ButtonExample = () => {
  const handlePress = () => {
    Alert.alert('Butona Basıldı!', 'Harika bir iş çıkardın.');
  };

  return (
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  separator: {
    marginVertical: 10,
  },
});

export default ButtonExample;

TouchableOpacity / Pressable: Özelleştirilebilir Düğmeler

Button bileşeni basit işler için yeterli olsa da, genellikle daha fazla özelleştirmeye ihtiyaç duyarız. TouchableOpacity ve Pressable bileşenleri, herhangi bir bileşeni (View, Text, Image vb.) basılabilir hale getirerek bu esnekliği sağlar.

* TouchableOpacity: Basıldığında opaklığını azaltarak görsel bir geri bildirim sağlar.
* Pressable: TouchableOpacity‘den daha yeni ve daha esnek bir bileşendir. onPress, onLongPress, onPressIn, onPressOut gibi daha fazla etkileşim geri bildirimi sunar ve basılma durumuna göre stil değişiklikleri yapma yeteneği sağlar.

Örnek (Pressable ile):

import React, { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

const CustomButton = () => {
  const [timesPressed, setTimesPressed] = useState(0);

  return (
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
  },
  buttonText: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: 'bold',
    letterSpacing: 0.25,
    color: 'white',
  },
});

export default CustomButton;

ScrollView: Kaydırılabilir İçerik

ScrollView, içeriği ekran boyutundan daha büyük olduğunda kaydırılabilir hale getiren bir kapsayıcıdır. Tüm içeriği tek seferde render eder, bu nedenle çok uzun listeler için performans sorunları yaratabilir.

Özellikleri:
* horizontal: İçeriği yatay olarak kaydırmak için true olarak ayarlanır.
* showsVerticalScrollIndicator / showsHorizontalScrollIndicator: Kaydırma çubuklarını gösterip gizler.
* contentContainerStyle: Kaydırılabilir içeriğin stilini belirtir.

Örnek:

import React from 'react';
import { ScrollView, Text, StyleSheet } from 'react-native';

const ScrollViewExample = () => {
  const items = Array.from({ length: 50 }, (_, i) => Öğe ${i + 1});

  return (
    
      {items.map((item, index) => (
        
      ))}
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  item: {
    fontSize: 20,
    padding: 10,
    marginVertical: 5,
    backgroundColor: '#eee',
    borderBottomWidth: 1,
    borderColor: '#ccc',
  },
});

export default ScrollViewExample;

FlatList / SectionList: Verimli Liste Görüntüleme

FlatList ve SectionList, uzun listeleri veya büyük veri kümelerini verimli bir şekilde görüntülemek için tasarlanmıştır. ScrollView‘in aksine, yalnızca ekranda görünen öğeleri render ederek performansı optimize ederler.

* FlatList: Basit, tek boyutlu listeler için.
* SectionList: Verileri bölümler halinde gruplandırılmış listeler için (örneğin, alfabetik olarak sıralanmış kişiler listesi).

Özellikleri (FlatList için):
* data: Render edilecek öğelerin dizisi.
* renderItem: Her bir öğenin nasıl render edileceğini tanımlayan bir fonksiyon. ({ item }) => gibi.
* keyExtractor: Her bir öğe için benzersiz bir anahtar sağlayan bir fonksiyon. Performans ve liste öğelerinin doğru bir şekilde güncellenmesi için kritik.

Örnek (FlatList ile):

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

const DATA = [
  { id: '1', title: 'Birinci Öğe' },
  { id: '2', title: 'İkinci Öğe' },
  { id: '3', title: 'Üçüncü Öğe' },
  { id: '4', title: 'Dördüncü Öğe' },
  { id: '5', title: 'Beşinci Öğe' },
  // ... daha fazla öğe
];

const Item = ({ title }) => (
  
);

const FlatListExample = () => {
  return (
     }
      keyExtractor={item => item.id}
      style={styles.container}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 20,
  },
});

export default FlatListExample;

ActivityIndicator: Yükleme Göstergesi

ActivityIndicator, bir işlem devam ederken kullanıcıya geri bildirim sağlayan bir yükleme animasyonudur (spinner).

Özellikleri:
* animating: Göstergenin görünüp görünmeyeceğini kontrol eder.
* color: Göstergenin rengi.
* size: Göstergenin boyutu (small, large veya sayı).

Örnek:

import React, { useState } from 'react';
import { View, ActivityIndicator, Button, StyleSheet } from 'react-native';

const LoadingIndicator = () => {
  const [isLoading, setIsLoading] = useState(false);

  return (
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default LoadingIndicator;

Switch: Açma/Kapama Anahtarı

Switch bileşeni, bir ayarı açıp kapatmak için kullanılan bir anahtardır.

Özellikleri:
* value: Anahtarın mevcut durumu (true veya false).
* onValueChange: Anahtarın durumu değiştiğinde çağrılan fonksiyon.
* trackColor: Anahtarın iz rengini kontrol eder.
* thumbColor: Anahtarın başparmak (düğme) rengini kontrol eder.

Örnek:

import React, { useState } from 'react';
import { View, Switch, Text, StyleSheet } from 'react-native';

const SwitchExample = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  label: {
    fontSize: 18,
    marginRight: 10,
  },
  status: {
    fontSize: 18,
    marginLeft: 10,
  },
});

export default SwitchExample;

Bileşenleri Birleştirmek ve Yapılandırmak

React Native’de temel bileşenleri tek başına kullanmak yerine, onları birleştirerek daha karmaşık ve işlevsel kullanıcı arayüzleri oluştururuz. Bu, uygulamanızın görünümünü ve hissini kontrol etmek için stil verme ve düzenleme tekniklerini anlamayı gerektirir.

Hiyerarşi ve İç İçe Yerleştirme

React Native bileşenleri, bir ağaç yapısı gibi iç içe yerleştirilir. Bir View diğer View‘leri, Text‘leri, Image‘leri ve diğer tüm bileşenleri içerebilir. Bu hiyerarşik yapı, uygulamanızın görsel düzenini ve bileşenler arası ilişkileri tanımlar.

Yukarıdaki örnekte, bir View ana kapsayıcı olarak görev yaparken, içinde bir Image ve başka bir View (metinler ve buton için) barındırır. Bu, modüler ve okunabilir bir yapı sağlar.

Stil Verme (Styling)

React Native’de stil verme, CSS’e benzer ancak bazı farklılıkları vardır. En yaygın stil verme yöntemi, JavaScript nesneleri kullanarak stil tanımlamaktır.

StyleSheet.create

En iyi uygulama, stilleri StyleSheet.create kullanarak ayrı bir JavaScript nesnesi içinde tanımlamaktır. Bu, stillerinizi organize eder, okunabilirliği artırır ve performans optimizasyonlarına olanak tanır.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'blue',
  },
});

Inline Stiller

Küçük ve dinamik stil değişiklikleri için doğrudan bileşenin style prop’una bir JavaScript nesnesi geçirebilirsiniz. Ancak, bu büyük uygulamalarda kodun karmaşıklığını artırabilir.

Çoklu Stiller

Bir bileşene birden fazla stil uygulayabilirsiniz. Stiller bir dizi içinde geçirilirse, dizideki son stil önceki stilleri geçersiz kılar.

Flexbox ile Düzen

React Native’deki düzen (layout) sistemi tamamen Flexbox üzerine kuruludur. Flexbox, bir kapsayıcı içindeki öğelerin nasıl düzenleneceğini, hizalanacağını ve dağıtılacağını kontrol etmek için güçlü ve esnek bir yoldur.

Temel Flexbox Özellikleri:
* flex: Bir öğenin kapsayıcı içinde ne kadar alan kaplayacağını belirler. flex: 1 genellikle bir bileşenin mevcut tüm alanı doldurmasını sağlar.
* flexDirection: Öğelerin ana eksen boyunca hangi yönde düzenleneceğini belirler (row – yatay, column – dikey, varsayılan).
* justifyContent: Öğelerin ana eksen boyunca nasıl hizalanacağını belirler (flex-start, center, flex-end, space-around, space-between, space-evenly).
* alignItems: Öğelerin çapraz eksen boyunca nasıl hizalanacağını belirler (flex-start, center, flex-end, stretch, baseline).
* padding / margin: İç ve dış boşlukları ayarlar.

Flexbox’ı anlamak, React Native’de duyarlı ve güzel tasarımlar oluşturmak için kritik öneme sahiptir.

Özel Bileşenler Oluşturma

React Native’in çekirdek bileşenleri harika bir başlangıç noktası olsa da, çoğu uygulama için özel bileşenler oluşturmanız gerekecektir. Özel bileşenler, uygulamanızın benzersiz UI/UX gereksinimlerini karşılamanıza, kod tekrarını azaltmanıza ve uygulamanızı daha modüler hale getirmenize olanak tanır.

Neden Özel Bileşen Oluşturmalı?

* Yeniden Kullanılabilirlik: Bir kez yazın, uygulamanızın farklı yerlerinde veya farklı projelerde tekrar kullanın.
* Soyutlama: Karmaşık mantığı veya UI parçalarını tek bir bileşen altında toplayarak ana bileşenlerinizin daha okunabilir olmasını sağlayın.
* Bakım Kolaylığı: Bir bileşende yapılan değişiklikler, yalnızca o bileşenin kendisini etkiler.
* Test Edilebilirlik: Daha küçük, izole bileşenlerin test edilmesi daha kolaydır.

Fonksiyonel Bileşenler ve Hooks

Modern React Native geliştirmede, fonksiyonel bileşenler ve React Hooks (özellikle useState ve useEffect) tercih edilen yaklaşımdır.

Örnek: Özel Bir Buton Bileşeni Oluşturma
Diyelim ki uygulamanızda belirli bir stil ve davranışa sahip birçok butonunuz var. Bunları her seferinde baştan yazmak yerine, özel bir MyButton bileşeni oluşturabiliriz:

import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

const MyButton = ({ title, onPress, buttonColor, textColor }) => {
  return (
     [
        styles.button,
        { backgroundColor: buttonColor || '#007bff' }, // Varsayılan renk
        pressed && styles.buttonPressed,
      ]}
    >
      
    
  );
};

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 10,
    elevation: 2, // Android için gölge
    shadowColor: '#000', // iOS için gölge
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  buttonPressed: {
    opacity: 0.8, // Basıldığında opaklığı azalt
  },
  buttonText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default MyButton;

Şimdi bu özel butonu uygulamamızın herhangi bir yerinde kolayca kullanabiliriz:

import React from 'react';
import { View, Alert } from 'react-native';
import MyButton from './components/MyButton'; // Varsayılan bir yoldan import ediyoruz

const App = () => {
  return (
    
  );
};

export default App;

Bu örnek, özel bir bileşenin nasıl oluşturulduğunu ve farklı props’lar alarak nasıl özelleştirilebildiğini gösterir. Bu yaklaşım, kod tabanınızı daha düzenli ve yönetilebilir hale getirir.

En İyi Uygulamalar ve İpuçları

React Native ile uygulama geliştirirken, bazı en iyi uygulamaları takip etmek, kodunuzun kalitesini, performansını ve sürdürülebilirliğini artırır.

* Bileşenleri Organize Edin: Bileşenlerinizi mantıksal olarak klasörlere ayırın (örneğin, components/, screens/, navigation/). Her bileşenin kendi klasörü içinde stil dosyası, test dosyası vb. olabilir.
* Anlamlı İsimlendirme: Bileşenlerinize ve prop’larınıza anlamlı, açıklayıcı isimler verin.
* key Prop’unu Kullanın: FlatList, ScrollView içindeki map fonksiyonu gibi listeleri render ederken her öğeye benzersiz bir key prop’u atayın. Bu, React’in liste öğelerini verimli bir şekilde güncellemesine yardımcı olur.
* Performans İçin FlatList / SectionList Kullanın: Uzun listeler için ScrollView yerine her zaman FlatList veya SectionList tercih edin. Bu bileşenler, yalnızca görünürdeki öğeleri render ederek bellek kullanımını ve render süresini optimize eder.
* Stilleri Ayırın: Inline stiller yerine StyleSheet.create kullanarak stilleri ayrı tutun.
* Platforma Özgü Kod: Platform API’sini veya .ios.js / .android.js uzantılarını kullanarak platforma özgü UI veya mantık uygulayın.
* Yorumlar ve Dokümantasyon: Karmaşık bileşenleri veya mantığı açıklayan yorumlar ekleyin. JSDoc gibi araçlarla bileşen prop’larını belgelemek, özellikle büyük ekiplerde çok faydalıdır.

Sonuç

React Native’in temel bileşenleri, modern mobil uygulama geliştirmenin omurgasını oluşturur. View, Text, Image, TextInput, Button, ScrollView ve FlatList gibi çekirdek bileşenler, uygulamanızın görsel arayüzünü oluşturmak için gerekli temel araçları sağlar. Props ve State mekanizmaları, bu bileşenlerin dinamik ve etkileşimli olmasını sağlarken, Flexbox tabanlı stil sistemi, duyarlı ve çekici tasarımlar oluşturmanıza olanak tanır.

Özel bileşenler oluşturma yeteneği, React Native’i inanılmaz derecede güçlü ve esnek bir çerçeve haline getirir. Bu, kod tekrarını önlemenize, uygulamanızın mimarisini temiz tutmanıza ve karmaşık UI’ları yönetilebilir parçalara ayırmanıza yardımcı olur.

Bu makalede ele alınan kavramları ve örnekleri pratik yaparak pekiştirmek, React Native yolculuğunuzda sağlam bir temel oluşturmanızı sağlayacaktır. Temel bileşenleri ve onları nasıl kullanacağınızı anladığınızda, hayal gücünüzün sınırları dahilinde her türlü mobil uygulamayı geliştirmeye hazırsınız demektir. Unutmayın, her büyük uygulama, küçük ve iyi tasarlanmış bileşenlerin bir araya gelmesiyle başlar.