Birleştirme
- React Native kursu
- Başlangıç
- Ders 23/116
- 6 dk
Tüm parçaları birleştirerek çalışan bir sayaç yazarsın.
Birleştirme ve reset
Sayaç uygulamamız neredeyse tamam. Artık increment ve decrement butonları çalışıyor. Şimdi bir reset özelliği ekleyeceğiz; bu, sayıyı sıfırlar.
reset fonksiyonu da setCount'u çağırır: function reset() { setCount(0); }. Bu, sayıyı başlangıç değerine döndürür.
Son olarak üçüncü bir <TouchableOpacity> butonu ekleyip onPress={reset} ile bağlayacağız. Böylece uygulama tamamlanmış olacak.
Reset butonu
reset fonksiyonunu tanımladıktan sonra onu da bir <TouchableOpacity> butonuna bağlarız. Bu, kullanıcının sayacı hızlıca sıfırlamasını sağlar ve uygulamayı kullanışlı kılar.
Buton: <TouchableOpacity onPress={reset}><Text>Sıfırla</Text></TouchableOpacity>.
Bunu öbür iki butonun altına ekleriz. Böylece üç butonlu, çalışan ve eksiksiz bir sayaç uygulamamız olur; proje tamamlanır.
Uygulama reset ekle
Mevcut App'e reset fonksiyonu ekle: function reset() { setCount(0); }. Üçüncü bir <TouchableOpacity onPress={reset}> butonu ekle, içinde <Text>Sıfırla</Text> olsun. Butonları diğerlerinin altına koy.
Başlangıç kodu
import { View, Text, TouchableOpacity } from 'react-native';
import { useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
function decrement() {
setCount(count - 1);
}
return (
<View>
<Text>Sayaç: {count}</Text>
<TouchableOpacity onPress={increment}>
<Text>Artır</Text>
</TouchableOpacity>
<TouchableOpacity onPress={decrement}>
<Text>Azalt</Text>
</TouchableOpacity>
</View>
);
}Örnek çözüm
import { View, Text, TouchableOpacity } from 'react-native';
import { useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}
function decrement() {
setCount(count - 1);
}
function reset() {
setCount(0);
}
return (
<View>
<Text>Sayaç: {count}</Text>
<TouchableOpacity onPress={increment}>
<Text>Artır</Text>
</TouchableOpacity>
<TouchableOpacity onPress={decrement}>
<Text>Azalt</Text>
</TouchableOpacity>
<TouchableOpacity onPress={reset}>
<Text>Sıfırla</Text>
</TouchableOpacity>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Tüm uygulamayı eşleştir
| Kavram | Anlamı |
|---|---|
useState |
Durum |
increment |
Artır |
decrement |
Azalt |
reset |
Sıfırla |
2 reset gövdesi
function reset() {
____;
}function reset() {
setCount(0);
}Açıklama: setCount(0) sayıyı sıfıra ayarlar.
3 reset butonu ne yapar?
- Sayıyı bir artırır
- Sayıyı sıfıra ayarlar Doğru cevap
- Sayıyı bir azaltır
- Sayıyı gizler
Açıklama: reset sayıyı sıfıra ayarlar.