React Native
Proje tasarımı
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.
Örnek çözümü göster
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 },
});
Kendini test et
-
Bu projede hangileri kullanılacak?
- View, Text, TextInput, useState ve navigation
- Yalnızca View ve Text
- Yalnızca CSS stilleri
- Yalnızca Alert bileşeni
Cevabı göster
View, Text, TextInput, useState ve navigation — Proje başlangıç seviyesinin tüm temellerini birleştirir.
-
Boşluğu doldur: StyleSheet içe aktarma
import { View, Text, ____ } from 'react-native';
Cevabı göster
import { View, Text, StyleSheet } from 'react-native';
-
Eşleştir: bileşen ve görevi
- View
- konteyner
- Text
- metin
- StyleSheet
- stil
Sıradaki ders: Bileşenler
