React Native AsyncStorage Kullanımı

Bu yazıda react native uygulamada asyncstorage ile nasıl data ları saklarız onu anlatacağım ve asyncstorage ile basit bir üyelik örneği yapacağız. Asyncstorage uygulama açıldığında tamamen boş bir depodur, bu depoda key value tarzında datalar saklıyoruz ve bu datalar uygulama kapatılıp açıldığında da değişmezler yani localStorage yerine kullanacağız. Kodda syntaxını inceleyelim:

 

 

Kodu hızlı device da test etmek için bu linke tıklayın daha iyi incelersiniz. Kodu incelersek: ilk önce bir state oluşturduk datamız var inital değerini de ‘text’ verdik,  componenetDidMount methodu uygulama açıldığında koşacak kısım burada da AsyncStorage.getItem(‘data’) ile depodan bir keyimizi çağırdık. key lerin hiçbir value si olmadığı için null olur. Data keyini çağırdık then kullanarak çağrıldıktan sonraki çalışacak bu fonksiyonda da keydeki value parametre olarak alıp setState ile data güncelliyoruz. Ardından value parametresi alan setData isimli bir method oluşturduk. AsyncStorage.setItem(‘data’, value) kullanarak data keyine value yi bastık state teki datayıda güncelledik. Şimdi render kısmına gelelim bir text input ve bir text imiz var. Text te state teki datayı bastık, text inputunda valuesi state teki data ve onchange inde setData methodumuzu çalıştırıyoruz. Sonuç olarak Text inputta yazdığımız data uyuglamayı kapatıp açtığımızda aynı şekilde duruyor olacak çünkü asyncStorage da datayı tutuyoruz. Linkten de hızlıca test edebilirsiniz.

Not: AsyncStorage kullanırken key ve value ler string olmalıdır.

Basit bir login örneği yapalım (hızlı test etmek için linke tıklayın):

Linkte örneği incelediyseniz uygulamada giriş yap butonuna tıklayınca sayfa değişiyor çıkış yap butonuna tıklayınca da login ekranına geri dönüyor giriş yapılı ikende uygulamayı kapatıp açtığınızda aynı şekilde giriş yapılı olur.

Makaleyi özet geçersek AsyncStorage ın ne olduğundan, getItem ve setItem methodlarının kullanımını, çalışma sisteminden bahsettik ve bir iki örnek geliştirdik.

By Batuhan Akkaya
04 Ağustos 2017