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

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. Возврат списка дочерних элементов из компонента — распространённая практика.

Проблемы?

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

Вопросы

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

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.

Ссылки:

1. React Native - official website
2. Learn React