React Native Öğreniyorum Bölüm 3

Pressable Nedir ve Nasıl Kullanılır?

Pressable, kullanıcının dokunma, basma ve bırakma gibi eylemlerini yakalamak için kullanılır.

İşte basit bir Pressable örneği:

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

const PressableExample = () => {
  const onPressHandler = () => {
    console.log('Butona basıldı!');
  };

  return (
    <Pressable
      onPress={onPressHandler}
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        width: '100%',
        cursor: 'pointer',
      }}>
      <Text>Basılabilir Buton</Text>
    </Pressable>
  );
};

export default PressableExample;

Yukarıdaki örnekte, bir Pressable bileşeni oluşturduk ve basıldığında çalışacak bir fonksiyon oluşturdum.Aşağıdaki görselde nasıl çalıştığı hakkında console.log’larıyla gözlemleyebilirsiniz.

( Görselde altı çizili olarak gözüküyor.Eslint’ten kaynaklanmaktadır.Dikkate almayınız )

useState Hook’u Hakkında Temel Bilgiler

useState Hook'u, bileşen içinde değişken değerlerini saklamak ve güncellemek için kullanılır.

useState için basit kullanım örneği aşağıda bulabilirsiniz.

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

const StateExample = () => {
  const [count, setCount] = useState(0);

  const increaseCount = () => {
    setCount(count + 1);
  };

  console.log('Butona basıldı.Sayı : ', count);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Artır" onPress={increaseCount} />
    </View>
  );
};

export default StateExample;

Yukarıdaki kodun uygulanmış halde ve butona basıldığında console.log’da değer değişimini aşağıdaki görselde görebilirsiniz.

( Görselde altı çizili olarak gözüküyor.Eslint’ten kaynaklanmaktadır.Dikkate almayınız )

Pressable ve useState Bir Arada

Pressable ve useState’i beraber kullanarak basılabilir bir butonu kullanarak sayaç değerini artırıp azaltabiliriz.

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

const PressableAndStateExample = () => {
  const [count, setCount] = useState(0);

  const onPressHandlerIncrease = () => {
    setCount(count + 1);
  };

  const onPressHandlerDecrease = () => {
    setCount(count - 1);
  };

  console.log('Sayı değişti', count);

  return (
    <View
      style={{
        display: 'flex',
        height: '100%',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <View style={{flexDirection: 'row', gap: 5, paddingVertical: 10}}>
        <Pressable
          onPress={onPressHandlerIncrease}
          style={{backgroundColor: '#eee', padding: 5}}>
          <Text>Basılabilir Buton Artır</Text>
        </Pressable>
        <Pressable
          onPress={onPressHandlerDecrease}
          style={{backgroundColor: '#eee', padding: 5}}>
          <Text>Basılabilir Buton Azalt</Text>
        </Pressable>
      </View>
      <Text style={{backgroundColor: 'red', padding: 5, color: 'white'}}>
        Sayaç Değeri: {count}
      </Text>
    </View>
  );
};

export default PressableAndStateExample;

Yukarıdaki kod örneğinde artırmak ve azaltmak için 2 adet fonksiyonum bulunmaktadır. Bu fonksyionları Pressable’a bağlayıp pressable componentine bastığımızda gerekli işlemleri yapıp useState yardımıyla beraber count değerini güncelleyecekler ve bu count değeri ekrana yazılmış olacaktır.

Kod parcacığının uygulanmış hali ve console.log ile beraber değerlerin nasıl değiştiğini takip edebilirsiniz.

Bu basit örneklerle Pressable ve useState özelliklerini kullanmayı öğrenerek, React Native uygulamalarınızı daha etkileşimli ve dinamik hale getirebilirsiniz. Sorularınız varsa, sormaktan çekinmeyin!