Özet - Olaylar

onPress, onLongPress ve form olaylarını birleştirerek bir geri bildirim formu yazarsın.

Özet - Olaylar

Bu grupta dokunma ve form olaylarını öğrendin. onPress hızlı dokunuşu, onLongPress uzun tutmayı yakalar. Olay işleyiciler event parametresi alır; nativeEvent içinden konum ve veri okunur.

onLayout yerleşim değişimini bildirir; layout.width ve layout.height ile ölçü alınır. Formlarda onChangeText her tuşa basışta, onSubmitEditing gönder tuşunda çağrılır. Şimdi iki mini görevle bunları birleştireceksin.

Uygulama Geri bildirim formu

Bir App bileşeni yaz. useState('') ile text tanımla. <TouchableOpacity> içinde <Text>Gönder</Text> göster; onPress {`() => console.log(text)`} yapsın. Üstte bir <TextInput> ekle: value={'{text}'}, onChangeText={'{setText}'}. App fonksiyonunu dışa aktar.

Örnek çözümü göster

function App() {
  const [text, setText] = useState('');
  return (
    <>
      <TextInput value={text} onChangeText={setText} />
      <TouchableOpacity onPress={() => console.log(text)}>
        <Text>Gönder</Text>
      </TouchableOpacity>
    </>
  );
}
export default App;

Uygulama Yerleşimi ölçen kart

Bir App bileşeni yaz. useState(0) ile height tanımla. <View>'a onLayout ver; event.nativeEvent.layout.height'i setHeight ile kaydet. İçine <Text>{`{height}`}</Text> koy. style ile height: 120 ver. App fonksiyonunu dışa aktar.

Örnek çözümü göster

function App() {
  const [height, setHeight] = useState(0);
  return (
    <View
      onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
      style={{ height: 120 }}>
      <Text>{height}</Text>
    </View>
  );
}
export default App;

Kendini test et

Tüm olay kavramlarını eşle

onPress

Hızlı dokunuş
onLongPress

Uzun tutma
onLayout

Yerleşim değişimi
onChangeText

Metin değişimi
Form gönderimini ne yakalar?
- onChangeText
- onLayout
- onSubmitEditing
- onLongPress
Cevabı göster

onChangeText — onSubmitEditing klavyedeki gönder tuşunu dinler.

Sıradaki ders: Uygulama tasarımı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler