React Native Hooks Kullanımı

Merhaba,

Normalde react.js geliştirdiğim uygulamarın yanına birde yahu bu React Native neymiş kine diyerek başladığım mobil programlama yolculugunda event handler’in hooklarla girdiği çatışmada css ve html’in hiç alakasız durumundan ve react native’in çalışma prensibini anlatmaya çalışacağım.

Aslında baktığımız zaman react.js ile çokta farkı yok şuan için handler aşamasında normal react içerisinde kullandığımız hooklar ile aynı diyebiliriz.

Peki farklılıkları nedir?

Platform farklılıklarının, Performanslarının, Kendine özgü yapılarının dışında, UI bileşenleri mevcut yapıda HTML ve CSS’e benzer fakat aynı değillerdir. React Native içerisinde <div> kullanılmaz ama <View> kullanılır, CSS içerisinde isimlendirmenin farklılıkları olsada neredeyse aynı. Aşağıda bazı örnekleri görebilirsiniz.

Birebir aynı olan özelliklerinden biride hook yapısı.

gündelik toDo listleri bir kenara bırakıp olayın ilginçleşmesi için mesela kripto hedeflerimizi girdiğimiz bir toDo list oluşturmaya çalışsaydık.

öncelikle bir input değerimiz, bir buttonumuz ve bunları listemek için bir hooks state’ine ihtiyacımız olurdu.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, View, Button } from 'react-native';
import { useState } from 'react';

export default function App() {

  const [enteredGoalText, setEnteredGoalText] = useState('');
  const [criptoGoals, setCriptoGoals] = useState([]);

  function goalInputHandler(enteredText) {
    console.log(enteredText);
    setEnteredGoalText(enteredText);
  };

  function addGoalHandler() { 
    console.log(enteredGoalText);
    setCriptoGoals(currentCriptoGoals => [...criptoGoals,enteredGoalText]);
  };

  return (
    <View style={styles.appContainer}>
      <View style={styles.inputContainer}>
        <TextInput style={styles.textInput} placeholder='Your Kripto Goal' onChangeText={goalInputHandler} />
        <Button title='Add Kripto Goal' onPress={addGoalHandler}/>
      </View>
      <View styles={styles.goalsContainer}>
        {criptoGoals.map((goal) => <Text Key={goal}>{goal}</Text> )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
    padding: 50,
    paddingHorizontal: 16
  },
  inputContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 24,
    borderBottomWidth: 1,
    borderBottomColor: '#cccccc'
  },
  textInput: {
    borderWidth: 1,
    borderColor: '#cccccc',
    width: '60%',
    marginRight: 8
  },
  goalsContainer: {
    flex: 5
  }
});

Yukarıdaki kod blogunda textler inputlar buttonlar bunların ekrandaki stylerının düzeltilmesi vb. olduğunu rahatça görebiliyoruz.

aşağıdaki parantezlerin içeriğin tamamı css ile alakalı

const styles = StyleSheet.create

Buna ek olarak,

<View> de React Native için flexbox oluşturduk ve webdeki grid sistemine yakın bir şekilde ekran düzenimizi sağladık.

<TextInput> adından da belli olduğu üzere text’imizi yazacağımız yer

<Button> tıklamalık olan. Burda tek farkı react.js de bu onClick olarak işlem görüyor fakat Native de onPress yada Tab şeklinde hani mouse yok hesabı. ki bu aslında bizim hookumuzu tetikleyecek olan işlem.

<Text> ise dümdük yazı.

Geriye ise hooklarımız kaldı.. Console.logları sadece işlemleri görmek için belirtiyorum. Tek tek açıklamak gerekirse

goalInputHandler fonksiyonu:

• Bu fonksiyon, TextInput bileşenine yazıyı tutar.
• Girilen metin enteredText parametresi olarak alınır ve console.log(enteredText) ifadesiyle konsola yazar çok ta gerekli bir işlem değil. Maksat noluyur görelim.
• Ardından, setEnteredGoalText(enteredText) ifadesi kullanılarak enteredGoalText state'i güncellenir. Bu, kullanıcının girdiği metni enteredGoalText state'ine atıyor
• setEnteredGoalText fonksiyonu useState Hook’u tarafından sağlanır ve state'i güncellemek için kullanılır. Bu fonksiyon çağrıldığında otomatik olarak bileşeni yeniden render eder ve güncellenmiş state'i kullanarak arayüzü güncelliyor.

addGoalHandler fonksiyonu:

• Bu fonksiyon, “Add Kripto Goal” düğmesine basıldığında tetiklenir.
• İlk olarak, console.log(enteredGoalText) ifadesiyle enteredGoalText state'i konsola yazar. şart değil tabi.
• Ardından, setCriptoGoals fonksiyonu kullanılarak criptoGoals state'i güncellenir. Bu fonksiyon, mevcut criptoGoals dizisini ve enteredGoalText state'ini kullanarak yeni bir dizi oluşturur.
• Güncellenmiş dizi, spread operatörü (...) kullanılarak oluşturulur. Bu operatör, mevcut diziye ek olarak yeni hedefi (enteredGoalText) ekler. Buradaki farkı şurada zamanında kendime not olarak almıştım örneği bulabilirsiniz https://oguzkumcular.medium.com/kendim-i%C3%A7in-javascript-notlar%C4%B1-v-1-f12add5efaf7
• setCriptoGoals fonksiyonu otomatik olarak bileşeni yeniden render eder ve güncellenmiş criptoGoals dizisini kullanarak arayüzü yeniler ve işlem gerçekleşmiş olur.

const [enteredGoalText, setEnteredGoalText] = useState('');
  const [criptoGoals, setCriptoGoals] = useState([]);

  function goalInputHandler(enteredText) {
    console.log(enteredText);
    setEnteredGoalText(enteredText);
  };

  function addGoalHandler() { 
    console.log(enteredGoalText);
    setCriptoGoals(currentCriptoGoals => [...criptoGoals,enteredGoalText]);
  };

Uygulama içerisinde herhangi bir yere kayıt yapmadığımız için criptoGoals dizine sırasıyla setlediğimiz değerleri aşağıdaki şekilde çağırıp render edebiliriz.

{criptoGoals.map((goal) => <Text Key={goal}>{goal}</Text> )}

Dahada açıklamak gerekise;

goalInputHandler ve addGoalHandler fonksiyonları React Hooks özelliğiyle yazıldı. React Hooks, React fonksiyonel bileşenlerinde (Event etkinlik yönetme)state yönetimi ve diğer React özelliklerini kullanabilmemizi sağlayan bir mekanizmadır.

useState hook'u, enteredGoalText ve criptoGoals gibi state değerlerini tanımlamak ve güncellemek için yukarıdaki örnekte kullandık. useState fonksiyonu, bir dizi döndürür ve bu dizi içerisindeki ilk eleman mevcut state değerini, ikinci eleman ise state'i güncellemek için kullanılacak bir fonksiyonu temsil ediyor.

Örneğin, const [enteredGoalText, setEnteredGoalText] = useState(''); ifadesi, enteredGoalText adında bir state değeri tanımlar ve setEnteredGoalText adında bir fonksiyon döndürür. enteredGoalText state'i, setEnteredGoalText fonksiyonu aracılığıyla günceller.

Benzer şekilde, const [criptoGoals, setCriptoGoals] = useState([]); ifadesi, criptoGoals adında bir dizi state değeri tanımlar ve setCriptoGoals adında bir fonksiyon döndürür. criptoGoals dizisi, setCriptoGoals fonksiyonu aracılığıyla günceller.

goalInputHandler ve addGoalHandler fonksiyonları bu state değerlerini güncellemek için setEnteredGoalText ve setCriptoGoals fonksiyonlarını kullanır. Bu sayede, state değerleri güncellendiğinde React otomatik olarak bileşeni yeniden render eder ve güncel verileri ekranda gösteriyor olacak.

En son olarak bu kodu alır yada github dan indirir çalıştırırsanız aşağıdaki gibi bir görselle karşılaşıcaksınız.

Expo ile kurduğum React native sürümünün tam kodlarına şurdan erişebilirsiniz;

https://github.com/Redwoodcutter/reactNativeToDoList

Teşekkürler ve görüşmek üzere,