Bir kullanıcının oturum açma kimlik bilgilerini almak istediğiniz bir durumu düşünün. Bu kullanım durumu için istemcinin uygulamanıza metin verisi girmesine olanak tanıyan bir bileşenin olması uygun olacaktır.

React Native bileşeninin devreye girdiği yer burasıdır TextInput. Dizelerin yanı sıra, onu şifreleri ve sayıları kabul edecek şekilde bile özelleştirebiliriz.

Bu yazıda React Native bileşeninin temellerini öğreneceksiniz TextInput. Daha sonra özelliklerini de ihtiyaçlarımıza göre uyarlayacağız.

Bu kılavuzun sonucu şu olacaktır:

• TextInput'u kullanmaya başlama
• TextInput temelleri
• Özelleştirme
• Bir kullanıcının girişini kaydetme
• React Native Paper içeren metin alanları

TextInput'u kullanmaya başlama

Expo ile bir uygulamayı gerçekleştirmek için aşağıdaki terminal komutunu çalıştırın:

expo init textinput - öğretici

Proje dizininizde bağımlılığı şu şekilde yükleyin:react-native-paper

npm install react - native - paper

TextInput temelleri

Aşağıdaki kod parçacığı temel bir metin kutusu oluşturur:

"react-native" öğesinden { StyleSheet , Text , View , TextInput } ' u içe aktarın ; varsayılan işlev Uygulamasını dışa aktar (        
   ) { return ( < Görünüm stili = { stiller . konteyner } > < TextInput stili = { stiller . giriş } /> </ Görünüm > ); } const stilleri = Stil Sayfası . create ({ 
   giriş : { 
    arka planRenk : "beyaz" }, //... }); 
   
     
        
    
  

   
  

Öğenizin şu şekilde daha da iyi görünmesini sağlayabilirsiniz:

const stilleri = Stil Sayfası . create ({ 
  input : { 
    borderColor : "gri" , 
    genişlik : "100%" , 
    borderWidth : 1 , 
    borderRadius : 10 , 
    padding : 10 , }, });       
  

Yukarıdaki kod parçasında metin kutusunun kenarlığını şekillendirdik ve ona biraz dolgu verdik. Üstelik mülkü kullandık borderRadius. Bu, React'e yuvarlak kenarlıklar eklemesini söyler.

Artık kesinlikle daha çekici görünüyor!

Özelleştirme

Yer tutucu ekleme

Kullanıcının verileri doldurmasına yardımcı olacak ipuçları ve talimatlar sağlamak istediğinizde yer tutucu eklemek kullanışlıdır.
Bunu yapmak için pervaneyi kullanın placeholder:

< TextInput stili = { stiller . giriş } yer tutucu = "John" />   

Çoklu satırlar

Bileşen TextInputayrıca çok satırlı metni de kabul edebilir. Bu, kullanıcı geri bildirimi alma gibi durumlarda faydalı olabilir:

< TextInput stili = { stiller . giriş } çoklu satır = {true} />   

Maksimum uzunluk

Kullanıcının giriş uzunluğunu kısıtlamak mı istiyorsunuz? Bu pervane ile mümkün olabilir maxLength:

< TextInput stili = { stiller . giriş } maxLength = {4} />   

Değiştirilemez metin kutusu

Prop'u kullanarak öğenize girişi engelleyebilirsiniz editable:

< TextInput stili = { stiller . input } düzenlenebilir = {false} değer = "Bu düzenlenemez" />
  
  
  

Klavye türlerini değiştirme

Müşterinin telefon numarasını istediğiniz bir durumu düşünün. Burada varsayılan klavye yerine sayısal klavyeyi göstermek mantıklı olacaktır.

Klavye türlerini değiştirmek için keyboardTypeşu şekilde kullanın:

< TextInput stili = { stiller . input } klavyeTürü = "telefon-pad" />  

Kullanıcının e-posta adresini almak için uygun olan şu keyboardTypeolacaktır :email-address

< TextInput stili = { stiller . input } KeyboardType = "e-posta adresi" />  

Şifre alma

Şifreler söz konusu olduğunda, metin alanımızı girilen verilerin gizleneceği şekilde özelleştirebiliriz. secureTextEntryBunu başarmak için özelliği şu şekilde kullanacağız :

< TextInput stili = { stiller . giriş } secureTextEntry = {true} / >  

Bir kullanıcının girişini kaydetme

Her metin değişikliğinden sonra

Diyelim ki arama çubuğu işlevi gören bir metin kutunuz var. Böyle bir durumda, girişin değeri her değiştiğinde verileri yakalamak istersiniz.

Bunu pervane aracılığıyla başarabilirsiniz onChangeText. Metin alanı bir değişiklik algıladığında çalışan bir geri aramadır:

varsayılan işlev Uygulamasını dışa aktar (   ) { const [ ad , setName ] = useState ( "" ); return ( < Stili görüntüle = { stiller . konteyner } > < Metin > Adı yaz . </ Text > < TextInput style = { stiller . input } placeholder = "John Doe" onChangeText = {( değer ) => setName ( değer )} /> < Metin > Hoş Geldiniz : { ad } </ Metin > </ Görüntüle > ); } 
    
   
     
      
      
        
        
         
      
       
    
  

nameBu kodda React Native'e Hook'u değerine güncellemesini söyledik TextInput. Sonunda değişkenin değerini gösterdik name.

Bir kullanıcı gönderdiğinde

Bir formunuzun olduğu ve verileri yalnızca kullanıcı formu gönderdiğinde kaydetmek istediğiniz bir durumu düşünün.

Bunu mümkün kılmak için geri aramayı kullanabilirsiniz onSubmitEditing:

varsayılan işlev Uygulamasını dışa aktar (   ) {
  const [name, setName] = useState("");
  return (
    <View style={styles.container}>
      <Text>Write name.</Text>
      <TextInput
        style={styles.input}
        onSubmitEditing={(value) => setName(value.nativeEvent.text)}
      />
      <Text>Welcome, {name}!</Text>
    </View>
  );
}

In the above piece of code, React Native updates the name Hook variable to the input value if the user presses the return key.

Text fields with React Native Paper

The React Native library allows us to display icons on any side of the text box. This will make your interface look more modern.

The following code snippet renders a graphic with the text field:

import { TextInput } from "react-native-paper";
//extra code removed...
return (
  <View>
    <Text> Please enter your credentials</Text>
    <TextInput label="Username" left={<TextInput.Icon name="account" />} />
    <TextInput
      label="Password"
      secureTextEntry
      left={<TextInput.Icon name="form-textbox-password" />}
    />
  </View>
);

The left property tells React Native to display the desired icon on the left.
This will be the output:

Design modes

React Native Paper provides two design modes which help in theming:

• flat: Creates a flat text input with an underline under the written text.
• outlinedTextInput: Etrafında bir taslak bulunan bir bileşen oluşturur :

<Görünüm> < Metin > Anahatlandırılmış Metin Girişi: </ Metin >
  
  <Metin Girişi
    label= "Kullanıcı adı" 
    left={ <TextInput.Icon name = "account" /> }  
    mode= "ana hatlarıyla belirtilen" 
    stil={{ kenar boşluğu : 10 }}
  />
  < Metin > Düz Metin Girişi: </ Metin >
  <Metin Girişi
    label= "Email" 
    left={ <TextInput.Icon name = "email" /> }  
    mode= "düz" 
    stil={{ kenar boşluğu : 10 }}
  />
</ Görüntüle >

Burada iki örnek oluşturduk TextInput. Bunlardan birinin bir outlinedmodu var ve ikincisi bir flatmod kullanıyor.

Hata stili

Kütüphane aynı zamanda hata stilimizi errorsüsleyen bir destek de sağlıyor TextInput. Bu, girişin yanlış olması durumunda uygulamanın kullanıcıya bildirimde bulunması gereken durumlar için idealdir:

const [ userError , setUserError ] = useState ( false ); return ( < Görünüm > < TextInput 
      label = "Email" 
      left ={< TextInput . Icon name = "email" />} 
      style ={{ marj : 10 }} 
      error ={ userError } //hata özelliği bizim kararımıza bağlı olacaktır userError Hook /> { /*Eğer kullanıcı bu butona basarsa userError Hook'un değeri sıfırlanacaktır.*/ } < Button onPress ={() => setUserError (( value ) => ! value )}> Press </ Button > < Durum Çubuğu /> </ Görüntüle > );  
 
  
        
    
    
       
     
  

Etkin alt çizgi renkleri

activeUnderlineColorve prop'lar inactiveUnderlineColorgirdimizin rengini değiştirir. Bu, uygulamanızın görünümünü ve temasını geliştirmek için mükemmeldir:

<Görünüm> < Metin stili = {{ paddingTop : 80 }} > Outlined TextInput: </ Text >
     
  <Metin Girişi
    label= "Email" 
    left={ <TextInput.Icon name = "email" /> }  
    stil={{ kenar boşluğu : 10 }}
    activeUnderlineColor= "green"  //Bu TextInput aktif olduğunda vurgu rengini yeşil olarak değiştirin 
    underlineColor= "purple"  //etkin olmadığında rengi mor olarak ayarlayın
  />
  < TextInput 
    label = "E-posta" 
    left = { < TextInput.Icon name = "e-posta" /> }  
    stil={{ kenar boşluğu: 10 }}
    activeUnderlineColor = "sarı"
    underlineColor = "kırmızı"
  />
</ Görüntüle >

Kaynak

• https://blog.logrocket.com/complete-guide-textinput-react-native/