React Native TextInput Hook

Bugün, React Native TextInput için özel bir Hook geliştirmeyi öğreniceğiz.

Projemizi indirdik ten sonra projemizi npm run start , npm run ios ile başlatıyoruz.

Projemizi başlattıktan sonra hooks adlı klasörün altında useTextInput.tsx dosyası oluşturuyoruz. Başlangıç versiyonunu yapıp üstüne ekleye ekleye gidicez. Bölüm 2' de ise prop’ ları nasıl ekliyeceğimizi göstereceğim. TextInput’ utumuza daha sonra prop’ larımızı yollamak için textInputView fonksiyonu oluşturup içine TextInput komponentimizi çağırıyoruz. Value değişimini yakalamak için ufak bir valueChangeHandler fonksiyonu ve value tutmak için state oluşturuyoruz. Oluşturduğumuz fonksiyonları ve state’ ti return’ a ekliyoruz. value, valueChangeHandler, textInputView

valueChangeHandler bu makalede hook’un dışında kullanmıcaz ama çok işinize yarıyacak bir fonksiyon her hangi bir durumdan sonra TextInput’ un için temizlemek için tek yapmanız gereken textInput.valueChangeHandler(‘’) istediğiniz yerde çağırmak.

useTextInput.tsx

Şimdi ise sırada hook’ umuzu çağırıp kullanmaya başlamamız kaldı. App.tsx içine hook’ umuzu çağırıyoruz. Burda hook’ umuzdan iki tane oluşturduk. Bir tanesi email için bir taneside password için. Hook içinde return ettiğimiz textInputView fonksiyonunu JSX içinde çağırıyoruz. Her useTextInput kendine özgüdür. Aşağıda gördüğünüz gibi ikisininde return ettiğimiz value’ sini alıp ekrana yazdırdık.

Hook’ umuz çok güzel çalışıyor şimdi focus olup olmadığını yakalayalım. bir tane inputHighlightedHandler fonksiyonu ve value’ i tutmak için state oluşturduk. isTouched state’ imizi aynı textInputView de yaptığımız gibi return’ a ekleyelim ve TextInput’ a onFocus, onBlur prop’ larını ekleyelim.

Artık an TextInput’ umuzun focus olup olmadığını görebiliyoruz ve bu bölümün sonuncusu olarak TextInput’ a girdiğimiz yazıyı validate etmek için useTextInput.tsx sayfasına validateValue fonksiyon prop’ u ekleyelim. hasError adında bir değişken oluşturup fonksiyonun içinden value’ mizi geçirelim hook’ u kullandığımız yerde value’ mizi yakalayıp istediğimiz kuralı belirleyip bize true veya false olduğunu geri döndürmek için kullanıcaz. !validateValue(value) bize girdiğimiz kuralın doğru olup olmadığını true veya false olarak geri dönücek. Son olarakta hasError değişkeninide return’ a ekleyelim.

useTextInput.tsx son hali.

App.tsx son hali.

Bununla birlikte ilk bölüm bitmiş bulunmakta artık TextInput’ umuzu istediğimiz yerde çağırıp istediğimiz adı verip focus’ cusunu, error’ unu, value’ sini yakalayıp istediğimiz işlemleri yaptırabiliriz. İkinci bölümde ise istediğimiz prop’ ları typescript kullanarak nasıl geçireceğimizi göstericem .

güle güle kullanın :)

Related posts:

The yearly banana stem waste will be increased as a result of banana growth plantation. There is a need to convert this waste into wealth by extracting the fibers from the banana stem. The banana…

The gaming industry continues to evolve, allowing gamers to experience emotions to the next level. Web3 also tends to affect the gaming industry, enabling game development companies to become more…