React Native
Skor hesaplama
Skor hesaplama ekranı yazarsın.
Skor hesaplama
Bu derste quiz akışına skor hesaplamayı ekleyeceğiz. useState ile score tutarsın. Kullanıcı bir seçeneğe basınca handleAnswer işlevi çağrılır. Bu işlev, basılan seçenek question.answer'a eşitse setScore(score + 1) yapar; sonra setIndex(index + 1) ile bir sonraki soruya geçer.
Bu ders, useState'in nesne state değil sayı state için kullanımını da gösterir. score bir sayıdır; her doğru cevapta bir artar. Ekranda <Text>Skor: {score}</Text> ile gösterirsin. handleAnswer işlevi, kullanıcı etkileşimini state değişimine çevirir; bu desen React'te çok yaygındır. Önceki dersteki Quiz bileşenini genişleteceğiz; başlangıç kodu önceki çözümü içerir.
Uygulama handleAnswer ve score ekle
Önceki dersteki Quiz bileşeni zaten tanımlı (aşağıdaki başlangıç kodunda). Şimdi bileşeni genişlet. useState ile score'u 0 olarak başlat. function handleAnswer(i) yaz: i === question.answer ise setScore(score + 1) yap; her zaman setIndex(index + 1) yap. Button'un onPress'ini () => handleAnswer(0) yap. Dönüşe <Text>Skor: {score}</Text> ekle.
Örnek çözümü göster
import { useState } from "react";
import { Text, View, Button } from "react-native";
const questions = [
{ id: 1, question: "Türkiye'nin başkenti?", options: ["İstanbul", "Ankara", "İzmir"], answer: 1 }
];
function Quiz() {
const [index, setIndex] = useState(0);
const [score, setScore] = useState(0);
const question = questions[index];
function handleAnswer(i) {
if (i === question.answer) setScore(score + 1);
setIndex(index + 1);
}
return (
<View>
<Text>{question.question}</Text>
<Button title={question.options[0]} onPress={() => handleAnswer(0)} />
<Text>Skor: {score}</Text>
</View>
);
}
Skorun gösterimi
Skoru ekranda göstermek, kullanıcıya ilerlemesini bildirir. <Text>Skor: {score}</Text> ile bunu yaparsın. {score} JSX'in süslü parantez içinde JavaScript ifadesi yazma desenidir; bu sayede state değerini metne gömersin.
Skor her güncellendiğinde bileşen yeniden render edilir ve yeni değer ekranda görünür. Bu, React'in reaktif yapısının özüdür: state değişince UI otomatik güncellenir. Bir sonraki derste tüm parçaları birleştirip API'den soru yükleyen, akışı çalıştıran ve skoru gösteren tam bir QuizApp yazacağız. Bu ders, son adım olan birleştirmeye hazırlandık.
Kendini test et
-
Skor state'ini başlat
const [score, ____] = useState(0);
Cevabı göster
const [score, setScore] = useState(0);
-
handleAnswer işlevinde ne yapılır?
function handleAnswer(i) { /* ... */ }
- Cevap doğruysa skor artırılır; her zaman sonraki soruya geçilir
- Yalnızca skor artırılır
- Hiçbir şey
- Yalnızca sonraki soruya geçilir
Cevabı göster
Cevap doğruysa skor artırılır; her zaman sonraki soruya geçilir — doğruysa skor artar; her zaman sonraki soruya geçilir.
-
Kavramı rolüne eşle
- score
- Doğru sayısı
- handleAnswer
- Cevap işleyicisi
- question.answer
- Doğru indeks
- setIndex(index + 1)
- Sonraki soru
Sıradaki ders: Birleştirme
