Основные компоненты и нативные компоненты
React Native — это фреймворк с открытым исходным кодом для создания приложений для Android и iOS с использованием React и нативных возможностей платформы приложения. С React Native вы используете JavaScript для доступа к API платформы, а также для описания внешнего вида и поведения пользовательского интерфейса с помощью компонентов React: наборов переиспользуемого, вложенного кода. Вы можете узнать больше о React в следующей секции. Но сначала давайте разберемся, как работают компоненты в React Native.
Представления и мобильная разработка
В разработке приложений для Android и iOS представление — это основной строительный блок пользовательского интерфейса: небольшой прямоугольный элемент на экране, который можно использовать для отображения текста, изображений или реагирования на ввод пользователя. Даже самые маленькие визуальные элементы приложения, такие как строка текста или кнопка, являются видами представлений. Некоторые виды представлений могут содержать другие представления. Всё построено на представлениях!
Нативные компоненты
В разработке для 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, чтобы удовлетворить уникальные потребности вашего приложения. У нас также есть процветающая экосистема этих компонентов, созданных сообществом. Ознакомьтесь с Каталогом нативных компонентов, чтобы найти то, что создало сообщество.
Основные компоненты
React Native имеет множество основных компонентов, от элементов управления до индикаторов активности. Вы можете найти их все в документации в разделе API. В основном вы будете работать со следующими основными компонентами:
| Компонент пользовательского интерфейса React Native | Представление Android | Представление iOS | Аналог в веб-приложении | Описание |
|---|---|---|---|---|
<View> |
<ViewGroup> |
<UIView> |
Непрокручиваемый <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, можете пропустить вперед.
© 2022 Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://reactnative.dev/docs/intro-react-native-components
