React Native

⌘K
  2. Home
  4. Docs
  6. React Native
  8. Componentler
  10. Input

Input

Kullanıcı etkileşiminde kullanılır yani kullanıcadan bir data alınacaksa , (kullanıcı adı , şifre, integer value) tek satır bir input oluşturmak için kullanılır .

Bir çok kütüphanede bulunur ancak en sağlıklısı native-base kütüphanesinde olanıdır.

sudo npm install native-base –save

sonrasında projemize import edelim .

import {Input} from ‘native-base’

<Input  
    value={this.state.sifre} 
    onChangeText={(sifre) => this.setState({ sifre })} 
    secureTextEntry={false} 
    keyboardType = 'numeric'
    />
valueher render sonrasında gösterilmesi istenen değer
onChangeTextHer tuşa basıldığında çağırılması istenen fonksiyon biz burda value daki değeri setState yaptık
secureTextEnteryGirilen değeri noktalar halinde gösterir yani bir nevi şifre gizlemedir.
keyboardTypeeğer sadece numpade açılması isteniyorsa eklenmelidir tüm klavye açılacaksa bu props silinebilir.

Default olarak gösterilecek değer için yani “buraya yazınız” gibi bir ifade kullanılacaksa dört farklı kullanım şekli mevcutdur .

 

FixedLabel

 <Form>
            <Item fixedLabel>
              <Label>Username</Label>
              <Input />
            </Item>
            <Item fixedLabel last>
              <Label>Password</Label>
              <Input />
            </Item>

InlineLabel

 <Form>
            <Item inlineLabel>
              <Label>Username</Label>
              <Input />
            </Item>
            <Item inlineLabel last>
              <Label>Password</Label>
              <Input />
            </Item>
          </Form>

FloatingLabel

  <Form>
            <Item floatingLabel>
              <Label>Username</Label>
              <Input />
            </Item>
            <Item floatingLabel last>
              <Label>Password</Label>
              <Input />
            </Item>
          </Form>

 

StackedLabel

  <Form>
            <Item stackedLabel>
              <Label>Username</Label>
              <Input />
            </Item>
            <Item stackedLabel last>
              <Label>Password</Label>
              <Input />
            </Item>
          </Form>

 

Tags