Proje tasarımı
- React Native kursu
- Başlangıç
- Ders 112/116
- 6 dk
Başlangıç finali mini uygulamasının iskeletini tasarlarsın.
Proje: Alışveriş Listesi
Bu projede başlangıç seviyesinin özetini yapan bir Alışveriş Listesi uygulaması built edeceğiz. Beş derste adım adım ilerleyeceğiz: önce iskeleti oluşturacak, sonra TextInput ekleyecek, useState ile durum yönetecek, navigasyon kuracak ve son olarak bir detay ekranıyla birleştireceğiz.
Her ders, önceki dersin çözümünü içeren bir başlangıç kodu verir. Sen yalnızca yeni parçayı eklersin. Proje bitince çalışan bir mini uygulaman olacak: ürün ekleyebilir, detay ekranına geçebilir ve geri dönebilirsin.
İskelet
Projenin ilk adımı, uygulamanın iskeletini oluşturmaktır. Bir App bileşeni tanımlar, içine bir <View> koyar ve başlık olarak bir <Text> gösterirsin. Stilleri StyleSheet.create ile tanımlarsın.
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Alışveriş Listesi</Text>
</View>
);
}Bu iskelet, sonraki derslerde üzerine yeni parçalar ekleyeceğin temeldir. flex: 1 ile View tüm ekranı kaplar; padding: 16 ile kenarlarda boşluk bırakılır.
Uygulama Sıra sende: uygulama iskeleti
View, Text ve StyleSheet'i react-native'den içe aktar. App bileşeni içinde bir <View style={styles.container}> ve onun içinde <Text>Alışveriş Listesi</Text> göster. StyleSheet.create ile container stiline flex: 1 ve padding: 16 ver.
Başlangıç kodu
// View, Text ve StyleSheet'i içe aktar
export default function App() {
return null;
}Örnek çözüm
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Alışveriş Listesi</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu projede hangileri kullanılacak?
- View, Text, TextInput, useState ve navigation Doğru cevap
- Yalnızca View ve Text
- Yalnızca CSS stilleri
- Yalnızca Alert bileşeni
Açıklama: Proje başlangıç seviyesinin tüm temellerini birleştirir.
2 Boşluğu doldur: StyleSheet içe aktarma
import { View, Text, ____ } from 'react-native';import { View, Text, StyleSheet } from 'react-native';Açıklama: StyleSheet ile stil tanımlarsın.
3 Eşleştir: bileşen ve görevi
| Kavram | Anlamı |
|---|---|
View |
konteyner |
Text |
metin |
StyleSheet |
stil |