TextInput

TextInput ile kullanıcı girdisi almayı öğrenirsin.

TextInput

React Native'in TextInput bileşeni kullanıcıdan metin alır. Text yalnızca metin gösterirken TextInput düzenlemeye izin verir; dokunulduğunda ekran klavyesi otomatik açılır.

Temel prop'ları şunlardır: value güncel metni, onChangeText metin değişince çağrılacak işlevi, placeholder ise boşken görünen ipucu metnini alır. react-native paketinden içe aktarılır: import { TextInput } from "react-native";. Bu derste önce en temel kullanımı göreceğiz.

Temel prop'lar

TextInput'un üç temel prop'u vardır. value bileşenin gösterdiği güncel metindir. onChangeText kullanıcı her tuşa bastığında çağrılır ve yeni metni ilk parametresi olarak alır. placeholder ise alan boşken görünen soluk ipucudur.

Bu üç prop birlikte ileride göreceğimiz "controlled input" desenini oluşturur. Şimdilik yalnızca TextInput'u ekrana getirmeyi ve içe aktarmayı çalışalım. Aşağıdaki alıştırmada View kabuğu içine tek bir TextInput yerleştireceksin.

Uygulama TextInput'u ekrana getir

TextInput'u react-native'den içe aktar. App bileşeni <View> çocuğu olarak bir <TextInput /> döndürsün.

Örnek çözümü göster

import { TextInput, View } from "react-native";

function App() {
  return (
    <View>
      <TextInput />
    </View>
  );
}

Kendini test et

TextInput hangi paketten gelir?
```
import { TextInput } from "?";
```
- react
- expo-av
- react-native
- @react-navigation/native
Cevabı göster

react-native — TextInput react-native paketinden içe aktarılır.

İçe aktarma satırı

import { ____ } from "react-native";

Cevabı göster

import { TextInput } from "react-native";

TextInput parçalarını eşle

TextInput

Metin girişi
Text

Metin gösterme
value

Güncel metin
placeholder

Boşken ipucu

Sıradaki ders: onChangeText

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler