Основные компоненты и нативные компоненты¶
React Native — это фреймворк с открытым исходным кодом для создания приложений для Android и iOS с использованием React и нативных возможностей платформы приложения. В React Native вы используете JavaScript для доступа к API вашей платформы, а также для описания внешнего вида и поведения вашего пользовательского интерфейса с помощью компонентов React: пучков многократно используемого, вложенного кода. Подробнее о React вы сможете узнать в следующем разделе. Но сначала давайте рассмотрим, как работают компоненты в React Native.
Представления и мобильная разработка¶
В разработке для Android и iOS представление (View) — это основной строительный блок пользовательского интерфейса: небольшой прямоугольный элемент на экране, который может использоваться для отображения текста, изображений или реагирования на ввод пользователя. Даже самые маленькие визуальные элементы приложения, такие как строка текста или кнопка, являются представлениями. Некоторые представления могут содержать другие представления. Это всё представления!
Нативные компоненты¶
При разработке Android вы пишете представления на Kotlin или Java; при разработке iOS вы используете Swift или Objective-C. В React Native вы можете вызывать эти представления с помощью JavaScript, используя компоненты React. Во время выполнения React Native создает соответствующие представления Android и iOS для этих компонентов. Поскольку компоненты React Native поддерживаются теми же представлениями, что и Android и iOS, приложения React Native выглядят, ощущаются и работают как любые другие приложения. Мы называем эти компоненты, поддерживаемые платформой, нативными компонентами.
React Native поставляется с набором основных, готовых к использованию нативных компонентов, которые вы можете использовать, чтобы начать создавать свои приложения уже сегодня. Это основные компоненты React Native.
React Native также позволяет создавать собственные нативные компоненты для Android и iOS в соответствии с уникальными потребностями вашего приложения. У нас также есть процветающая экосистема этих компонентов, созданных сообществом. Посмотрите Native Directory, чтобы найти то, что было создано сообществом.
Основные компоненты¶
В React Native есть множество основных компонентов для всего — от элементов управления до индикаторов активности. Вы можете найти их все документированные в разделе API. В основном вы будете работать со следующими основными компонентами:
| React Native UI Component | Android View | iOS View | Web Analog | Описание |
|---|---|---|---|---|
<View> | <ViewGroup> | <UIView> | A non-scrolling <div> | Контейнер, поддерживающий компоновку с помощью flexbox, стиль, некоторые функции обработки касаний и элементы управления доступностью |
<Text> | <TextView> | <UITextView> | <p> | Отображение, стилизация и вложение строк текста и даже обработка событий касания |
<Image> | <ImageView> | <UIImageView> | <img> | Отображение различных типов изображений |
<ScrollView> | <ScrollView> | <UIScrollView> | <div> | Общий контейнер с прокруткой, который может содержать несколько компонентов и представлений |
<TextInput> | <EditText> | <UITextField> | <input type="text"> | Позволяет пользователю вводить текст |
В следующем разделе вы начнете комбинировать эти основные компоненты, чтобы узнать, как работает React. Попробуйте поиграть с ними здесь и сейчас!
Поскольку React Native использует ту же структуру API, что и компоненты React, для начала работы вам потребуется понимание API компонентов React. Следующий раздел позволит быстро ознакомиться или освежить тему. Однако если вы уже знакомы с React, не стесняйтесь пропустить его.
