Özet - Olaylar
- React Native kursu
- Başlangıç
- Ders 82/116
- 5 dk
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.
Başlangıç kodu
import { useState } from 'react';
import { TextInput, TouchableOpacity, Text } from 'react-native';
// geri bildirim formunu buraya yazÖrnek çözüm
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.
Başlangıç kodu
import { useState } from 'react';
import { View, Text } from 'react-native';
// yerleşimi ölçen kartı buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Tüm olay kavramlarını eşle
| Kavram | Anlamı |
|---|---|
onPress |
Hızlı dokunuş |
onLongPress |
Uzun tutma |
onLayout |
Yerleşim değişimi |
onChangeText |
Metin değişimi |
2 Form gönderimini ne yakalar?
- onChangeText Doğru cevap
- onLayout
- onSubmitEditing
- onLongPress
Açıklama: onSubmitEditing klavyedeki gönder tuşunu dinler.