Kişi Listesi Uygulaması Oluşturma
Akıcı kaydırma performansına sahip gerçekçi bir kişiler ekranı oluşturmak için SectionList'i, alfabetik bölüm üst bilgilerini, arama filtresini ve aşağı çekerek yenilemeyi birleştirin.
Kişi Listesi Uygulaması Oluşturma, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.
Uygulamaya Genel Bakış: Kişiler Listesi
Bu derste FlatList ve SectionList derslerindeki her şeyi birleştiren gerçekçi bir kişiler listesi ekranı oluşturacaksınız. Uygulama, kişileri alfabetik olarak gruplandıracak, arama filtresini destekleyecek, yenilemek için çekmeye izin verecek ve yüzlerce kayıtla bile akıcı performansını koruyacak.
Kişiler Verilerini Tanımlama
Statik bir kişi nesneleri dizisiyle başlayın. Gerçek bir uygulamada bu veriler cihazın kişiler API'sinden veya uzak bir sunucudan gelirdi. Her kişinin bir id, name ve phone özelliği vardır. Benzersiz bir sayısal veya metin ID'si, keyExtractor için gereklidir.
const CONTACTS = [
{ id: '1', name: 'Alice Brown', phone: '+1-555-0101' },
{ id: '2', name: 'Andrew Chen', phone: '+1-555-0102' },
{ id: '3', name: 'Bob Davis', phone: '+1-555-0201' },
{ id: '4', name: 'Carol Evans', phone: '+1-555-0301' },
// ... more contacts
];Arama Filtresi Durumu
Bir searchQuery durum değişkeni ekleyin ve kişileri gruplandırmadan önce kişiler dizisini filtreleyin. Filtre, büyük-küçük harfe duyarsız eşleşme için hem sorguyu hem de kişi adını küçük harfe dönüştürür. Filtreleme ve gruplandırmayı useMemo içine alarak yalnızca kişiler veya sorgu değiştiğinde yeniden hesaplanmasını sağlayın.
const [searchQuery, setSearchQuery] = useState('');
const filteredContacts = useMemo(() => {
if (!searchQuery) return CONTACTS;
return CONTACTS.filter((c) =>
c.name.toLowerCase().includes(searchQuery.toLowerCase())
);
}, [searchQuery]);Kişileri Alfabetik Olarak Gruplandırma
Filtrelenmiş düz diziyi SectionList bölümleri biçimine dönüştürün. Kişileri ilk harfe göre anahtarlanmış bir eşlemeye indirgeyin, ardından anahtarları sıralayıp bölüm nesnelerine dönüştürün. Bu dönüşüm, tek bir hesaplanmış değer elde etmek için filtreyle birlikte useMemo içinde çalışır.
const sections = useMemo(() => {
const map = filteredContacts.reduce((acc, contact) => {
const letter = contact.name[0].toUpperCase();
if (!acc[letter]) acc[letter] = [];
acc[letter].push(contact);
return acc;
}, {});
return Object.keys(map).sort().map((key) => ({
title: key,
data: map[key],
}));
}, [filteredContacts]);Arama Çubuğu Bileşeni
Bir TextInput bileşenini SectionList'in üzerinde ListHeaderComponent olarak oluşturun; böylece listeyle birlikte kayar. onChangeText ile bunu searchQuery durumuna bağlayın. Girdinin içinde yerel bir temizleme düğmesi göstermek için iOS'ta clearButtonMode özelliğini kullanın.
const SearchBar = () => (
<TextInput
style={styles.searchBar}
placeholder='Search contacts...'
value={searchQuery}
onChangeText={setSearchQuery}
clearButtonMode='while-editing'
/>
);Kişi Satırı Bileşeni
Gereksiz yeniden oluşturmaları önlemek için React.memo kullanarak önbelleğe alınmış bir satır bileşeni oluşturun. Satırda kişinin baş harfleri renkli bir avatar dairesi içinde, adı ve telefon numarası ise sağda gösterilir. Satır bileşenini önbelleğe almak, yüzlerce kişiyle akıcı kaydırma için kritik öneme sahiptir.
const ContactRow = React.memo(({ item }) => (
<View style={styles.row}>
<View style={styles.avatar}>
<Text style={styles.initials}>{item.name[0]}</Text>
</View>
<View>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.phone}>{item.phone}</Text>
</View>
</View>
));Bölüm Başlığı Bileşeni
Alfabetik bölüm başlığı, harfi içeren basit bir View bileşenidir. Ayırt edici bir arka plan rengi ve sabit davranış vererek kullanıcı her harf grubunda kaydırma yaparken görünür kalmasını sağlayın. Her harf için bir kez oluşturulduğundan bileşeni küçük ve önbelleğe alınmış tutun.
const SectionHeader = ({ section }) => (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>{section.title}</Text>
</View>
);Yenilemek İçin Çekme Entegrasyonu
Bir refreshing durumu ekleyerek yenileme işlemini benzetin. Yenileme sırasında arama sorgusunu temizleyin (böylece kullanıcılar tüm kişileri yeniden görür), bir ağ çağrısını benzetmek için kısa süre bekleyin ve ardından refreshing değerini false olarak ayarlayın. Gerçek bir uygulamada cihazın kişiler API'sinden veya sunucudan verileri yeniden alırdınız.
const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
setRefreshing(true);
setSearchQuery('');
setTimeout(() => setRefreshing(false), 1000);
};Sonuç Olmadığında Boş Durum
Filtrelenmiş bölümler dizisi boş olduğunda (arama ile eşleşen kişi olmadığında) ListEmptyComponent kullanarak bilgilendirici bir boş durum gösterin. Kullanıcıya hiçbir kişinin sorgusuyla eşleşmediğini bildirin ve aramayı temizlemesini önerin. Bu, boş bir ekran göstermekten çok daha iyidir.
const ListEmpty = () => (
<View style={styles.empty}>
<Text>No contacts found for '{searchQuery}'</Text>
<Button title='Clear Search' onPress={() => setSearchQuery('')} />
</View>
);Eksiksiz Ekranı Birleştirme
Tüm parçaları birleştirin: bölümler verilerini içeren SectionList, önbelleğe alınmış renderItem, renderSectionHeader, keyExtractor, sabit başlıklar, yenilemek için çekme ve arama çubuğu için ListHeaderComponent. Sonuç, üretim kalitesinde bir kişiler ekranıdır.
export default function ContactsScreen() {
return (
<SectionList
sections={sections}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <ContactRow item={item} />}
renderSectionHeader={({ section }) => <SectionHeader section={section} />}
stickySectionHeadersEnabled
refreshing={refreshing}
onRefresh={onRefresh}
ListHeaderComponent={SearchBar}
ListEmptyComponent={ListEmpty}
/>
);
}Bir Kişi Ayrıntıları Ekranına Geçiş
ContactRow bileşenini TouchableOpacity ile sararak her satırın dokunulabilir olmasını ve navigation.navigate('ContactDetail', { contactId: item.id }) çağrısını yapmasını sağlayın. Ayrıntılar ekranı ID'yi route.params içinden okur ve daha önce öğrendiğiniz React Navigation yaklaşımını izleyerek kişinin tüm verilerini alır.
const ContactRow = React.memo(({ item, onPress }) => (
<TouchableOpacity onPress={() => onPress(item)} style={styles.row}>
<View style={styles.avatar}>
<Text style={styles.initials}>{item.name[0]}</Text>
</View>
<View>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.phone}>{item.phone}</Text>
</View>
</TouchableOpacity>
));Hızlı Kontrol
Bu dersteki Kişiler Listesi Uygulaması mimarisini anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: verimli bir kişiler ekranı için SectionList, arama filtreleme ve useMemo'yu birleştirmeyi, kaydırma performansını korumak için satır bileşenlerini React.memo ile önbelleğe almayı ve özenli bir kullanıcı deneyimi için yenilemek üzere çekme ile boş durumları entegre etmeyi. Sırada useRef kancasını ve değiştirilebilir değerleri inceleyeceğiz.
Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Kişi Listesi Uygulaması Oluşturma” dersi ücretsiz mi?
Evet — “Kişi Listesi Uygulaması Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.
“Kişi Listesi Uygulaması Oluşturma” dersinde ne öğreneceğim?
Akıcı kaydırma performansına sahip gerçekçi bir kişiler ekranı oluşturmak için SectionList'i, alfabetik bölüm üst bilgilerini, arama filtresini ve aşağı çekerek yenilemeyi birleştirin. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Native Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Kişi Listesi Uygulaması Oluşturma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- FlatList Verileri, renderItem ve keyExtractor
- Aşağı Çekerek Yenileme ve Daha Fazla Yükleme
- Üst Bilgili SectionList
- Kişi Listesi Uygulaması Oluşturma