Этот урок посвящен основным компонентам React Native: View, Text, Button, Alert и Image. Рассмотрим их использование и основные атрибуты.
Отличия от HTML
В React Native отсутствуют стандартные HTML-теги, такие как <div>, <span> и другие. Используются компоненты, подключаемые в начале кода и используемые аналогично синтаксису XML (с угловыми скобками для открытия и закрытия тегов и атрибутами). Вместо CSS применяются стили, задаваемые через атрибуты.
View, Text, Button, Alert, Image
Рассмотрим основные компоненты:
Компонент View
View — базовый компонент, аналогичный глобальному родительскому объекту, содержащему другие элементы. По умолчанию дочерние элементы располагаются в координатах (0, 0), без отступов. Для корректного отображения рекомендуется использовать SafeAreaView, автоматически учитывающий системные панели (например, челку на iPhone). SafeAreaView создает внутренние отступы, обеспечивая видимость элементов под панелями.
Компонент Text
Text используется для отображения текстовых надписей. Для перевода текста на новую строку можно:
- Создать новый объект Text.
- Использовать специальный символ \n, заключенный в фигурные скобки и одинарные кавычки: {‘\n’}.
Компонент Button
Button используется для создания кнопок. Это самозакрывающийся тег. Текст на кнопке задается атрибутом title. Дизайн кнопки зависит от операционной системы (iOS или Android). Стили добавляются через атрибут style.
Компонент Alert
Alert используется для создания всплывающих окон. Метод alert() создает простое окно с кнопкой «OK». Для более сложных окон используется Alert.alert(), принимающий параметры:
- title: Заголовок окна.
- message: Основное сообщение.
- buttons: Массив объектов, описывающих кнопки (каждый объект имеет свойства text — текст на кнопке, и onPress — функция-обработчик нажатия).
Компонент Image
Image используется для отображения изображений. Атрибуты:
- source: Путь к изображению. Может быть локальным путем (с использованием require(‘./path/to/image.jpg’)) или URL-адресом.
- width, height: Ширина и высота изображения.
- borderRadius: Скругление углов изображения.
Обработчик нажатия на изображение (onPress) требует обертывания компонента Image в TouchableOpacity или подобный компонент, предотвращающий нежелательные визуальные эффекты.
Атрибуты компонентов
Компонентам можно добавлять атрибуты для настройки свойств:
- numberOfLines: Ограничивает количество отображаемых строк текста.
- style: Позволяет добавлять стили, аналогично CSS классам. Стили задаются как объект JavaScript. Пример: { color: ‘red’ }.
- onPress: Добавляет обработчик события нажатия. Рекомендуется создавать отдельные константы для функций-обработчиков, улучшая читаемость кода.
Рассмотрены основные компоненты React Native. Их использование интуитивно понятно и аналогично XML-синтаксису. Более детальное изучение стилей и других возможностей будет продолжено в следующих уроках.