Основные компоненты

React Native предоставляет набор базовых компонентов, из которых строятся все экраны мобильного приложения. Эти компоненты отображаются как нативные элементы на iOS и Android, в отличие от HTML-элементов в вебе.

View

Компонент View — это основной контейнерный элемент. Он не отображает содержимое сам по себе, но группирует другие компоненты и применяет к ним стили. По функциональности он ближе всего к <div> в HTML, но имеет ряд особенностей:

  • Не может содержать текст напрямую — для этого используется Text.
  • Поддерживает большинство layout-свойств: flex, padding, margin, backgroundColor и т.д.
  • Является блочным элементом по умолчанию.

Пример:

<View style={{ padding: 16, backgroundColor: '#fff' }}>
  <Text>Заголовок</Text>
</View>

Text

Компонент Text предназначен исключительно для отображения текста. Важно помнить:

  • Текст можно размещать только внутри Text.
  • Другие Text могут быть вложенными — это позволяет применять разные стили к частям строки.
  • Не поддерживает layout-свойства вроде width, height, margin — только текстовые (fontSize, color, fontWeight и т.п.).

Пример:

<Text style={{ fontSize: 18 }}>
  Обычный текст <Text style={{ fontWeight: 'bold' }}>жирный фрагмент</Text>
</Text>

Image

Компонент Image отображает изображения — как локальные, так и сетевые. Основные особенности:

  • Обязательно требует явного указания размеров (width и height) для корректного отображения.
  • Для локальных изображений используется require().
  • Для сетевых — объект с ключом uri.

Пример:

// Локальное изображение
<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

// Сетевое изображение
<Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 200, height: 200 }} />

ScrollView и FlatList

Оба компонента позволяют прокручивать содержимое, но используются в разных сценариях.

ScrollView подходит для небольших списков или контента фиксированной длины. Он рендерит всё содержимое сразу, что может повлиять на производительность при большом объёме данных.

FlatList оптимизирован для длинных списков: он рендерит только видимые элементы и переиспользует их при прокрутке (техника «virtualization»). Требует указания data и renderItem.

Пример FlatList:

<FlatList
  data={['Элемент 1', 'Элемент 2', 'Элемент 3']}
  renderItem={({ item }) => <Text>{item}</Text>}
  keyExtractor={(item, index) => index.toString()}
/>

TextInput

Компонент TextInput создаёт поле для ввода текста. Поддерживает стандартные свойства: value, onChangeText, placeholder, keyboardType и другие.

Пример:

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

Button, TouchableOpacity, Pressable

Для обработки нажатий используются интерактивные компоненты.

Button — простой компонент с ограниченной кастомизацией. Принимает title и onPress.

TouchableOpacity и Pressable дают больше контроля над внешним видом. При нажатии TouchableOpacity слегка затемняет содержимое, а Pressable позволяет полностью управлять состоянием (нажат/не нажат).

Примеры:

<TouchableOpacity onPress={() => console.log('Нажато!')}>
  <View style={{ padding: 12, backgroundColor: '#007AFF' }}>
    <Text style={{ color: '#fff' }}>Кнопка</Text>
  </View>
</TouchableOpacity>

<Pressable
  onPress={() => console.log('Нажато!')}
  onPressIn={() => console.log('Палец коснулся')}
  onPressOut={() => console.log('Палец оторван')}
  style={({ pressed }) => ({
    opacity: pressed ? 0.6 : 1,
    padding: 12,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  })}
>
  <Text style={{ color: '#fff', textAlign: 'center' }}>
    Нажми меня
  </Text>
</Pressable>