В React Native существует набор базовых компонентов, которые представляют собой абстракции над нативными элементами iOS и Android. Эти компоненты позволяют разрабатывать мобильные приложения, не обращаясь напрямую к платформенно-зависимому коду. Все базовые компоненты реализованы на JavaScript, но под капотом связаны с нативными API через "bridge" — механизм, позволяющий JavaScript управлять нативными модулями.

Ниже приведено детальное описание наиболее используемых базовых компонентов React Native:

Компоненты для построения структуры интерфейса

View

Аналог <div> в HTML. Основной строительный блок для UI. Используется для компоновки, стилей и размещения других компонентов.

<View style={{ padding: 10 }}>
<Text>Hello</Text>
</View>

Особенности:

• Поддерживает стилизацию, позиционирование, flexbox.

• Может быть вложенным.

• Может использоваться как контейнер или как элемент.

ScrollView

Контейнер с прокруткой, позволяющий отображать большое количество элементов, выходящих за пределы экрана.

<ScrollView>
<Text>Много текста...</Text>
</ScrollView>

Особенности:

• Поддерживает вертикальную и горизонтальную прокрутку.

• Загружает все элементы сразу (в отличие от FlatList).

• Подходит для небольших объемов данных.

SafeAreaView

Используется для обеспечения корректного отображения контента в области, не перекрытой элементами системы (напр. вырезы на экране, индикаторы).

<SafeAreaView>
<Text>Контент не будет перекрыт системными элементами</Text>
</SafeAreaView>

Только для iOS 11+ и Android с gesture navigation.

KeyboardAvoidingView

Автоматически сдвигает интерфейс вверх, чтобы не перекрывать поля ввода клавиатурой.

<KeyboardAvoidingView behavior="padding">
<TextInput />
</KeyboardAvoidingView>

Особенно полезно в формах.

Компоненты для отображения текста и изображений

Text

Используется для вывода текста.

<Text style={{ fontSize: 20 }}>Привет, мир</Text>

Особенности:

• Может быть вложенным.

• Поддерживает стилизацию.

• Может быть кликабельным через onPress.

TextInput

Поле для ввода текста.

\\<TextInput
placeholder="Введите имя"
onChangeText={text => setName(text)}
value={name}
/>

Особенности:

• Поддерживает маску ввода, автофокус, управление клавиатурой.

• Может быть многострочным (multiline).

• Имеет множество событий (onChangeText, onSubmitEditing и др.).

Image

Отображает изображение (локальное или по URL).

<Image
source={{ uri: 'https://example.com/image.jpg' }}
style={{ width: 200, height: 200 }}
/>

Особенности:

• Поддерживает различные форматы изображений.

• Можно использовать resizeMode (cover, contain, stretch, и др.).

• Может быть фоном или элементом интерфейса.

Компоненты взаимодействия и ввода

Button

Простейшая кнопка.

<Button
title="Нажми меня"
onPress={() => alert('Нажато!')}
/>

Особенности:

• Кроссплатформенный внешний вид.

• Не гибок в стилизации (часто заменяется на TouchableOpacity/Pressable + View + Text).

Pressable

Современный компонент для обработки нажатий. Гибче Button, можно управлять стилями во время нажатия.

<Pressable onPress={() => console.log('Нажато')}>
<Text>Нажми</Text>
</Pressable>

Особенности:

• Поддерживает onPress, onLongPress, onPressIn, onPressOut.

• Позволяет применять разные стили для разных состояний.

TouchableOpacity

Компонент-обертка, при нажатии делает содержимое прозрачным (эффект нажатия).

<TouchableOpacity onPress={() => console.log('Нажато')}>
<Text>Нажми</Text>
</TouchableOpacity>

Особенности:

• Подходит для создания кастомных кнопок.

• Можно анимировать степень прозрачности (activeOpacity).

TouchableHighlight

При нажатии делает фон более тёмным.

<TouchableHighlight
onPress={() => alert('Нажато')}
underlayColor="#DDDDDD"
\>
&lt;Text&gt;Кнопка&lt;/Text&gt;
&lt;/TouchableHighlight&gt;

Используется реже, чем TouchableOpacity.

Списки и рендеринг массивов

FlatList

Оптимизированный компонент для отображения длинных списков.

<FlatList
data={\[{ key: '1', name: 'Элемент 1' }\]}
renderItem={({ item }) => &lt;Text&gt;{item.name}&lt;/Text&gt;}
/>

Особенности:

• Рендерит только видимые элементы.

• Поддерживает заголовки, подгрузку данных, pull-to-refresh.

• Лучшая производительность по сравнению с ScrollView.

SectionList

Список с секциями, каждая из которых имеет заголовок и элементы.

<SectionList
sections={\[
{ title: 'A', data: \['Apple', 'Avocado'\] },
{ title: 'B', data: \['Banana'\] }
\]}
renderItem={({ item }) => &lt;Text&gt;{item}&lt;/Text&gt;}
renderSectionHeader={({ section }) => &lt;Text&gt;{section.title}&lt;/Text&gt;}
/>

Компоненты доступа к устройству и функциональности системы

Modal

Отображает всплывающее окно поверх всего UI.

<Modal visible={modalVisible} animationType="slide">
<Text>Это модальное окно</Text>
</Modal>

ActivityIndicator

Показывает индикатор загрузки.

<ActivityIndicator size="large" color="#0000ff" />

StatusBar

Позволяет управлять статус-баром устройства.

<StatusBar backgroundColor="#61dafb" barStyle="dark-content" />

RefreshControl

Используется для реализации pull-to-refresh в ScrollView и FlatList.

<ScrollView
refreshControl={
&lt;RefreshControl refreshing={refreshing} onRefresh={handleRefresh} /&gt;
}
/>

Прочие базовые компоненты

• TouchableWithoutFeedback — обертка без визуального отклика на нажатие.

• VirtualizedList — основа для FlatList и SectionList.

• ImageBackground — компонент для отображения фонового изображения.

• Pressable — предпочтительный способ обработки нажатий (более гибкий, чем Touchable-компоненты).

• Alert — не является JSX-компонентом, но предоставляет возможность вызвать системный алерт.

Alert.alert('Заголовок', 'Сообщение');

React Native также включает в себя большое количество API (например, PermissionsAndroid, Linking, Vibration, Dimensions), но они не являются визуальными компонентами и работают больше как модули для логики.

Базовые компоненты можно импортировать напрямую из react-native:

import { View, Text, TextInput, FlatList, Pressable } from 'react-native';

Они формируют фундамент интерфейса любого мобильного приложения на React Native.