React Native / useState

useState

useState, React Native’de değişkenlerin değerini dinamik olarak tutmak için kullanılır.

//const [degisken, setDegisken] = useState(baslangicDegeri);

const [kullaniciAdi, setKullaniciAdi] = useState('');

kullaniciAdi → mevcut değer
setKullaniciAdi → değeri değiştiren fonksiyon
'' → başlangıçta boş

onChangeText={setKullaniciAdi}

setKullaniciAdi("admin");

const [sayi, setSayi] = useState(0);

setSayi(5);

Kısaca:

useState = değişkeni canlı tutar ve ekranda günceller.

Örnek

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

export default function App() {
  const [name, setname] = useState('');
  const [pass, setpass] = useState('');
  
  const kontrol =()=>{
    if(name=="ender" && pass=="837"){
      alert("Giriş Yapıldı");
    }else{
      alert("Giriş Başarısız Kullanıcı adı veya Şifre yanlış");
    }
  }
  return (
    <ImageBackground
      source={require('./assets/images.jpg')}
      resizeMode="cover"
      style={styles.Arkaplan}>
      <View style={styles.container}>
        <TextInput
          placeholder="Kullanıcı Adı"
          id="name"
          onChangeText={setname}
          style={styles.Kutucuk}/>
          <TextInput
          placeholder="Kullanıcı Şifre"
          id="name"
          onChangeText={setpass}
          style={styles.Kutucuk}/>
      <TouchableHighlight  onPress={kontrol}>
      <View style={styles.btn}>Giriş Yap</View>
      </TouchableHighlight>
          
      </View>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:"center",
    gap:"20px",
    padding: 8,
  },
  Arkaplan: {
    flex: 1,
  },
  Kutucuk:{
    color:"white",
    fontSize:20,
    borderBottomColor:"white",
    borderBottomWidth:"2px",
    padding:"10px",
    outlineStyle:"none"

  },btn:{
    backgroundColor:"#fff",
    padding:"13px",
    paddingHorizontal:"20px",
    borderRadius:"10px",
  }

});