Uygulama tasarımı
- React Native kursu
- Başlangıç
- Ders 83/116
- 6 dk
Hava durumu uygulamasının yapısını tasarlarsın.
Hava durumu uygulaması
Bu projede küçük bir hava durumu uygulaması yazacaksın. Uygulama bir şehrin sıcaklığını ve durumunu gösterecek; kullanıcı şehir seçip aşağı çekerek yenileyebilecek.
Adım adım ilerleyeceğiz: önce iskeleti kur, sonra veri modelini tanımla, ardından sıcaklığı görüntüle, şehir seçimi ekle ve sonunda her parçayı birleştir. Her ders önceki dersin çözümü üzerine inşa edilir.
Bu projede ScrollView, Image, state ve olay gruplarından öğrendiklerini bir araya getireceksin. Hadi başlayalım.
Bileşenlere ayır
Uygulamayı küçük parçalara bölmek geliştirmeyi kolaylaştırır. Şimdilik tek bir App bileşeni yeterli; ileride parçaları ayırabilirsin.
İskelette bir <View> kabı ve içinde bir <Text> başlık olur. StyleSheet.create ile kabı ortalanmış, esnek boyutta tutarız. Sonraki derslerde bu iskeletin içini dolduracağız.
Şimdilik hedef: derleme hatasız, ekranda bir başlık gösteren bir iskelet. Sonraki adımlarda state, görüntüleme ve etkileşim ekleyeceğiz.
Uygulama Uygulama iskeleti
Bir App bileşeni yaz. İçinde <View style={'{styles.container}'}> ve içinde <Text>Hava durumu</Text> olsun. StyleSheet.create ile container stilini tanımla: flex: 1, justifyContent: 'center', alignItems: 'center'. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { View, Text, StyleSheet } from 'react-native';
// uygulama iskeletini buraya yazÖrnek çözüm
function App() {
return (
<View style={styles.container}>
<Text>Hava durumu</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' }
});
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Uygulama neyi gösterir?
- Yalnızca saatı
- Şehrin sıcaklığı ve durumu Doğru cevap
- Yalnızca takvimi
- Yalnızca batarya durumunu
Açıklama: sıcaklık ve durum ana bilgilerdir.
2 StyleSheet'i içe aktar
import { View, Text, ____ } from 'react-native';import { View, Text, StyleSheet } from 'react-native';Açıklama: StyleSheet.create ile stilleri tanımlarız.
3 İskelet parçalarını eşle
| Kavram | Anlamı |
|---|---|
View |
Kapsayıcı kabuk |
Text |
Başlık öğesi |
StyleSheet |
Stil nesnesi |
App |
Kök bileşen |