React Native - это кроссплатформенный фреймворк для разработки мобильных приложений, созданный компанией Facebook в 2015 году. React Native использует JavaScript в качестве базового языка программирования и призван помочь разработчикам создавать полноценные мобильные приложения для устройств Android и iOS с единой кодовой базой.

В этой статье я расскажу о некоторых ключевых концепциях и компонентах React Native.

Кросс-платформенная разработка - это искусство написания программного обеспечения, которое работает на разных платформах; вы пишете кодовую базу один раз и используете ее на разных платформах. Кросс-платформенная разработка обеспечивает широкую целевую аудиторию, поскольку у вас есть различные варианты запуска вашей кодовой базы. К примеру, одно приложение можно устанавливать как на устройствах Android, так и на iOS, что приводит к расширению пользовательской базы.

Давайте рассмотрим некоторые особенности React Native.

Некоторые из популярных приложений, созданных с использованием React Native, включают:

1. Написать один раз и использовать везде

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

2. Большая база сообщества

   Поскольку React Native основан на JavaScript, он имеет высокий уровень популярности и большую базу сообщества. JavaScript - это самый популярный язык программирования внешнего интерфейса, который используется практически на всех веб-сайтах.

3. Пакеты и плагины сторонних разработчиков

   В React Native вы можете использовать сторонние плагины и пакеты для расширения возможностей вашего приложения. На самом деле, многие библиотеки JavaScript с открытым исходным кодом, найденные на NPM, могут быть использованы с React Native.

4. Быстрое обновление

   Быстрое обновление - это функция React Native, которая позволяет вам получать практически мгновенный отклик на изменения в вашем коде. Благодаря функции быстрого обновления вы можете видеть каждое изменение пользовательского интерфейса сразу после обновления кода.

5. Возможность быстро создавать кросс-платформенные программы

   С React Native вам не нужно изучать программирование для iOS или Android, если вы не создаете сложное приложение. Это означает, что вы можете разработать свое приложение полностью на JavaScript и использовать код на разных платформах, работающих и на iOS, и на Android.

6. Не нужен компилятор

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

7. Легко отлаживать

   React Native использует инструменты разработчика Chrome и Safari, что позволяет разработчикам быстро обнаруживать и устранять ошибки.

Некоторые из популярных приложений, созданных с использованием React Native, включают:

• Facebook
• Instagram
• Skype (для Linux)
• Pinterest
• Salesforce
• Discord
• Bloomberg
• Wix
• Uber Eats

В отличие от React, который рендерит в DOM веб-страницы, React Native рендерит в нативные представления iOS или Android. Это позволяет разработчикам создавать нативные приложения для iOS и Android, просто используя React Native.

React и React Native довольно похожи, поскольку оба используют JavaScript; однако есть и существенные различия.

• React используется для разработки веб-приложений, а React Native - для создания мобильных приложений.
• Что касается настройки, то React требует инструментов для настройки, поскольку является фреймворком, в то время как React Native поставляется в комплекте со всеми инструментами, необходимыми для создания приложений.
• React не поддерживает живую перезагрузку, в то время как React Native поддерживает живую перезагрузку.
• React использует все элементы, предусмотренные спецификацией HTML, такие как <div>, <span>, и другие, в то время как React Native задействует новые компоненты, такие как <View> и <Text>

Предположим, вы хотите создать приложение для Android и iOS. Обычно для этого требуется две отдельные среды разработки, т.е. Xcode и Android Studio. Однако с React Native вам понадобится только один инструмент для поддержки обеих версий.

Expo CLI - это приложение командной строки, которое позволяет разработчикам создавать кроссплатформенные приложения, не обращаясь к Android Studio или Xcode. Expo позволяет запускать проекты, созданные с помощью Create React Native App, без компиляции нативного кода. Expo также позволит вам запустить приложение практически без конфигурации.

Как установить Expo CLI

npm install -g expo-cli

После установки Expo CLI на вашей машине разработки, следующим требованием будет установка приложения Expo Go на устройство iOS или Android для запуска ваших приложений. Приложение Expo Go позволяет открывать приложения, которые обслуживаются через Expo CLI.

Чтобы создать новое приложение с помощью Expo, выполните следующую команду:

expo init my-app

Давайте рассмотрим компоненты React Native и то, как вы обычно используете их в своем приложении React Native.

View - это фундаментальный строительный блок любого интерфейса React Native. Он напрямую связан с нативным представлением приложения.

<View>
</View>

Text - это еще один фундаментальный компонент любого интерфейса React Native и используется для отображения текста в вашем приложении.

<View>
  <Text>Hello World!</Text>
</View>

Другие важные компоненты включают:

• TextInput
• ScrollView
• FlatList
• SectionList
• Image
• ImageBackground
• Button
• Switch
• KeyboardAvoidingView
• ActivityIndicator
• Alert
• Dimensions
• Linking
• Modal
• PixelRatio
• RefreshControl
• StatusBar

Expo CLI позволяет создавать проекты и запускать их с минимальной конфигурацией и без необходимости использования Xcode или Android Studio. Другие преимущества Expo включают:

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

Разработка React Native берет многое из того, к чему вы привыкли в веб-разработке, и переносит это в нативную разработку.

При разработке нативных приложений важно отметить несколько различий между приложениями для iOS и Android. Например, если Android использует Material Design, то iOS использует Human Interface Design.

Например, навигация между экранами отличается в iOS и Android; устройства Android имеют навигационную панель в нижней части экрана, в то время как устройства iOS имеют кнопку "назад".

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