Proje tasarımı
- React Native kursu
- Başlangıç
- Ders 19/116
- 6 dk
Sayaç uygulamasının yapısını taşarlar ve iskelet kodu yazarsın.
Proje: Sayaç uygulaması
Bu projede bir sayaç uygulaması geliştireceğiz. Kullanıcı bir sayıyı artırıp azaltabilecek; ekran da güncel sayıyı gösterecek.
Uygulamayı beş derste adım adım kuracağız. Önce temel iskeleti yazacağız, sonra useState ile durumu ekleyeceğiz, ardından artır/azalt fonksiyonlarını ve TouchableOpacity butonlarını bağlayacağız.
Sonunda çalışan, gerçek bir mini uygulama elde edeceğiz.
İlk iskelet
Şimdilik useState yok; sayıyı sabit olarak 0 yazacağız. Sonraki derslerde bunu duruma çevireceğiz. Önce çalışan bir ekran görmek önemli.
İskelet şu parçalardan oluşur: react-native'den View ve Text içe aktarma; export default function App() tanımı; <View> içinde <Text>Sayaç: 0</Text>.
Bu iskelet, projenin geri kalanının üzerine kurulacağı zemindir.
Uygulama İlk iskeleti yaz
react-native'den View ve Text'i içe aktar. export default function App() tanımını yaz; <View> içinde <Text>Sayaç: 0</Text> döndürsün.
Başlangıç kodu
// react-native'den View ve Text içe aktar
// export default function App() {...}
function App() {
return null;
}Örnek çözüm
import { View, Text } from 'react-native';
export default function App() {
return (
<View>
<Text>Sayaç: 0</Text>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sayaç uygulaması ne yapacak?
- Resim yüklemek
- Sayıyı artırıp azaltmak Doğru cevap
- Konum görmek
- Mesaj göndermek
Açıklama: Sayaç, sayıyı artırıp azaltır.
2 Sayaç parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
Sayaç |
Sayı gösterme |
Artır |
Bir artırma |
Azalt |
Bir azaltma |
useState |
Durum yönetimi |
3 İçe aktarma satırı
import { View, ____ } from 'react-native';import { View, Text } from 'react-native';Açıklama: Text bileşeni react-native'den gelir.