Делаем добро вместе Детальнее

Уроки React Native

#3 – Основные компоненты (View, Text, Button, Alert, Image)

#3 – Основные компоненты (View, Text, Button, Alert, Image)

Мобильное приложение на основе React Native строится за счет использования различных компонентов. За урок мы познакомимся с написанием основных компонентов React Native по типу: View, Text, Button, Alert, Image.

Видеоурок

Полезная ссылка:


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

Любое React Native приложение состоит из множества компонентов (объектов), что отвечают за вывод определенного элемента на экран. За урок мы рассмотрели такие компоненты, как:

  • View – компонент для создания блока
  • Text – компонент для создания текстовых надписей
  • Button – компонент для создания кнопок
  • Alert – компонент для создания всплывающих окон
  • Image – компонент для отображения фото


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


Полный перечень всех компонентов доступен на официально сайте в разделе документация.


Работа с компонентами

Принцип работы с компонентами прост. Сперва любой компонент нужно подключить вверху страницы:

import { Button } from 'react-native';

После этого вы можете использовать его внутри основной функции. К компоненту также можно дописывать атрибуты, что добавляют дополнительные настройки:

<Button title='Надпись на кнопке' />

При неоходимости к объектам можно добавлять обработчики событий. Они могут срабатывать в разные моменты. Ниже показа пример обработчика события, что срабатывает при нажатии на кнопку:

<Button title='Надпись на кнопке' onPress={() => console.log('Сообщение в консоль')} />

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Курс по React JS для начинающих
14 уроков
Создание приложения на React JS / Использование API
7 уроков
Изучение React JS / Redux библиотеки
9 уроков
Комментарии для сайта Cackle