Перейти к основному содержимому

Базовые компоненты

Text#

C этим компонентом React для отображения текста мы уже познакомились. Text поддерживает вложение, стили и сенсорную обработку.

Image#

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

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

View#

Самый фундаментальный компонент для создания пользовательского интерфейса - View - контейнер, который поддерживает макет с flexbox стилем, некоторой обработкой касаний и элементами управления специальными возможностями.

View предназначено для вложения в другие представления и может иметь от 0 до многих дочерних элементов любого типа.

В этом примере создается представление, которое обертывает два поля с цветом и текстовый компонент в строке с заполнением.

View предназначены для использования с StyleSheet, хотя встроенные стили также поддерживаются.

StyleSheet#

С React Native вы стилизуете свое приложение с помощью JavaScript. Все основные компоненты принимают свойство с именем style.

<Text style={{ color: 'gold' }}>Hello world!</Text>

Имена и значения стилей обычно соответствуют тому, как работает CSS в сети, за исключением того, что имена пишутся с использованием верблюжьего регистра, например backgroundColor, а не background-color.

style prop может быть обычным объектом JavaScript. Вы также можете передать массив стилей - последний стиль в массиве имеет приоритет, поэтому вы можете использовать его для наследования стилей.

По мере того как компонент становится более сложным, часто бывает проще использовать StyleSheet.create для определения нескольких стилей в одном месте.

ActivityIndicator#

Отображает круговой индикатор загрузки.

Композиция компонентов#

Компоненты могут ссылаться на другие компоненты в своём выводе (результате отрисовки). Подобно матрешке компоненты вкладываются друг в друга. К примеру, мы можем создать компонент App, который отрисовывает компонент HelloWorld много раз:

Пустые теги <>...</> это сокращённая запись объявления фрагментов. Фрагменты позволяют возвращать несколько элементов из компонента. Являясь своего рода оберткой для группы компонентов. Фрагменты позволяют формировать список дочерних элементов, не создавая лишних узлов в DOM. Возврат списка дочерних элементов из компонента — распространённая практика.

Проблемы?#

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

JavaScript Camp

Вопросы#

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

  1. text
  2. Text
  3. h1

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

  1. Image
  2. img
  3. Imag

Сколько существует способов работы с размерами в React Native:

  1. 1
  2. 2
  3. 3

Фундаментальный компонент для создания пользовательского интерфейса:

  1. <>
  2. Text
  3. View

View не предназначено для вложения в другие представления?

  1. true
  2. false

View может иметь от 0 до многих дочерних элементов любого типа?

  1. true
  2. false

View не предназначены для использования с StyleSheet?

  1. true
  2. false

С React Native вы стилизуете свое приложение с помощью JavaScript. Все основные компоненты принимают свойство с именем style?

  1. true
  2. false

Имена и значения стилей обычно пишутся в ___?

  1. UpperCase
  2. LowerCase
  3. CamelCase

Style prop может быть обычным объектом JavaScript, а также можете передать массив стилей?

  1. true
  2. false

Компоненты могут ссылаться на другие компоненты в своём выводе (результате отрисовки)?

  1. true
  2. false

Пустые теги ... это сокращённая запись объявления компонента View?

  1. true
  2. false

Done ✅#

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

Sumerian school

Ссылки:#

  1. React Native - official website
  2. Learn React

Become a Patron!