Создание приложения со списком контактов
Объедините SectionList, алфавитные заголовки разделов, фильтр поиска и обновление потягиванием, чтобы создать реалистичный экран контактов с плавной прокруткой.
«Создание приложения со списком контактов» — бесплатный урок React Native Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Native Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Native Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
App Overview: Contacts List
In this lesson you will build a realistic contacts list screen that combines everything from the FlatList and SectionList lessons. The app will display contacts grouped alphabetically, support a search filter, allow pull-to-refresh, and maintain smooth performance even with hundreds of entries.
Defining the Contacts Data
Start with a static array of contact objects. In a real app this would come from the device's contacts API or a remote server. Each contact has an id, name, and phone. A unique numeric or string ID is essential for the keyExtractor.
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
];Search Filter State
Add a searchQuery state variable and filter the contacts array before grouping. The filter converts both the query and contact name to lowercase for a case-insensitive match. Wrap the filtering and grouping in useMemo so it only recomputes when the contacts or query changes.
const [searchQuery, setSearchQuery] = useState('');
const filteredContacts = useMemo(() => {
if (!searchQuery) return CONTACTS;
return CONTACTS.filter((c) =>
c.name.toLowerCase().includes(searchQuery.toLowerCase())
);
}, [searchQuery]);Grouping Contacts Alphabetically
Convert the filtered flat array into the SectionList sections format. Reduce the contacts into a map keyed by the first letter, then sort the keys and map them to section objects. This transformation runs inside useMemo alongside the filter for a single computed value.
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]);Search Bar Component
Render a TextInput above the SectionList as the ListHeaderComponent so it scrolls with the list. Bind it to searchQuery state with onChangeText. Use the clearButtonMode prop on iOS to show a native clear button inside the input.
const SearchBar = () => (
<TextInput
style={styles.searchBar}
placeholder='Search contacts...'
value={searchQuery}
onChangeText={setSearchQuery}
clearButtonMode='while-editing'
/>
);Contact Row Component
Build a memoized row component using React.memo to prevent unnecessary re-renders. The row shows the contact's initials in a colored avatar circle and their name and phone number on the right. Memoizing the row component is critical for smooth scrolling with hundreds of contacts.
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>
));Section Header Component
The alphabetic section header is a simple View with the letter. Give it a distinct background color and sticky behavior so it stays visible as the user scrolls through each letter group. Keep the component small and memoized since it renders once per letter.
const SectionHeader = ({ section }) => (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>{section.title}</Text>
</View>
);Pull-to-Refresh Integration
Simulate refreshing by introducing a refreshing state. On refresh, clear the search query (so users see all contacts again), wait briefly to simulate a network call, then set refreshing to false. In a real app you would re-fetch from the device contacts API or the server.
const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
setRefreshing(true);
setSearchQuery('');
setTimeout(() => setRefreshing(false), 1000);
};Empty State When No Results
When the filtered sections array is empty (no contacts match the search), display an informative empty state using ListEmptyComponent. Tell the user no contacts match their query and suggest they clear the search. This is far better than showing a blank screen.
const ListEmpty = () => (
<View style={styles.empty}>
<Text>No contacts found for '{searchQuery}'</Text>
<Button title='Clear Search' onPress={() => setSearchQuery('')} />
</View>
);Assembling the Full Screen
Combine all the pieces: SectionList with the sections data, memoized renderItem, renderSectionHeader, keyExtractor, sticky headers, pull-to-refresh, and ListHeaderComponent for the search bar. The result is a production-quality contacts screen.
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}
/>
);
}Navigating to a Contact Detail Screen
Make each row tappable by wrapping the ContactRow in a TouchableOpacity that calls navigation.navigate('ContactDetail', { contactId: item.id }). The detail screen reads the ID from route.params and fetches the full contact data, following the React Navigation pattern you learned earlier.
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>
));Quick Check
Test your understanding of the Contacts List App architecture from this lesson.
Lesson Recap
In this lesson you learned: combine SectionList, search filtering, and useMemo for an efficient contacts screen, memoize row components with React.memo to maintain scroll performance, and integrate pull-to-refresh and empty states for a polished UX. Next up we dive into the useRef hook and mutable values.
Часто задаваемые вопросы
Урок «Создание приложения со списком контактов» бесплатный?
Да — полный текст урока «Создание приложения со списком контактов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Native Academy, подпишись на CoddyKit PRO. Курс React Native Academy содержит 4 уроков всего.
Чему я научусь в уроке «Создание приложения со списком контактов»?
Объедините SectionList, алфавитные заголовки разделов, фильтр поиска и обновление потягиванием, чтобы создать реалистичный экран контактов с плавной прокруткой. Ты практикуешь React Native Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Native Academy?
Предыдущий опыт не требуется. React Native Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Создание приложения со списком контактов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Native Academy?
Да. Каждый урок React Native Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Данные FlatList, renderItem и keyExtractor
- Обновление потягиванием и загрузка дополнительных данных
- SectionList с заголовками
- Создание приложения со списком контактов