React Native
onPress
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.
Örnek çözümü göster
function App() {
const [count, setCount] = useState(0);
return (
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text>{count}</Text>
</TouchableOpacity>
);
}
export default App;
Kendini test et
-
onPress ne zaman çalışır?
- Her saniye
- Bileşen ekrana geldiğinde
- Yalnızca açılışta
- Kullanıcı dokunduğunda
Cevabı göster
Kullanıcı dokunduğunda — her dokunma onPress'i çağırır.
-
onPress'i ekle
import { TouchableOpacity, Text } from 'react-native';
function App() {
return (
<TouchableOpacity ____={() => console.log('Dokunuldu')}>
<Text>Bas</Text>
</TouchableOpacity>
);
}
Cevabı göster
import { TouchableOpacity, Text } from 'react-native';
function App() {
return (
<TouchableOpacity onPress={() => console.log('Dokunuldu')}>
<Text>Bas</Text>
</TouchableOpacity>
);
}
-
onPress parçalarını eşle
- onPress
- Dokunma olayı
- handlePress
- Olay işleyici fonksiyon
- () => ...
- Ok fonksiyonu
- TouchableOpacity
- Dokunulabilir bileşen
Sıradaki ders: onLongPress
