onPress
- React Native kursu
- Başlangıç
- Ders 77/116
- 4 dk
onPress ile dokunma olayını öğrenirsin.
onPress olayı
onPress kullanıcı bir öğeye dokunduğunda çağrılır. Bir butona bastığında bir şey olmasını istiyorsan onPress prop'una bir fonksiyon verirsin.
Sayaç projesinde TouchableOpacity ile onPress'i görmüştün. Şimdi olay tarafını derinleştireceğiz. Örnek: <TouchableOpacity onPress={'{() => console.log('Dokunuldu')}'}}>. Butona her baskı konsola yazı yazar.
Fonksiyon doğrudan {`{handlePress}`} olarak ya da ok fonksiyonuyla {`{() => handlePress()}`} olarak verilebilir. Parametre gerekiyorsa ok fonksiyonu kullanılır; yoksa doğrudan referans daha temizdir.
onPress'e fonksiyon vermek
onPress'e iki biçimde fonksiyon verebilirsin. Doğrudan referans: onPress={'{handlePress}'}. Bu, fonksiyonu olduğu gibi verir.
Ya da ok fonksiyonu içinde: onPress={'{() => handlePress()}'}. Bu, parametre göndermek ya da birden çok şey çağırmak istediğinde kullanılır. Örneğin {`{() => { setCount(count + 1); log(); }}`}.
Önemli tuzak: onPress={'{handlePress()}'} yazma. Bu, fonksiyonu render sırasında hemen çağırır; dokunmayı beklemez. Her zaman fonksiyonun kendisini ver.
Uygulama Sayı artıran buton
Bir App bileşeni yaz. useState(0) ile count tanımla. <TouchableOpacity> içine <Text>{`{count}`}</Text> koy. onPress ile setCount(count + 1) çağır. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';
// butonu buraya yazÖrnek çözüm
function App() {
const [count, setCount] = useState(0);
return (
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text>{count}</Text>
</TouchableOpacity>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 onPress ne zaman çalışır?
- Her saniye
- Bileşen ekrana geldiğinde
- Yalnızca açılışta
- Kullanıcı dokunduğunda Doğru cevap
Açıklama: her dokunma onPress'i çağırır.
2 onPress'i ekle
import { TouchableOpacity, Text } from 'react-native';
function App() {
return (
<TouchableOpacity ____={() => console.log('Dokunuldu')}>
<Text>Bas</Text>
</TouchableOpacity>
);
}import { TouchableOpacity, Text } from 'react-native';
function App() {
return (
<TouchableOpacity onPress={() => console.log('Dokunuldu')}>
<Text>Bas</Text>
</TouchableOpacity>
);
}Açıklama: onPress dokunma olayını dinler.
3 onPress parçalarını eşle
| Kavram | Anlamı |
|---|---|
onPress |
Dokunma olayı |
handlePress |
Olay işleyici fonksiyon |
() => ... |
Ok fonksiyonu |
TouchableOpacity |
Dokunulabilir bileşen |