Что такое React Native?

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

В чем разница между кодом React и React Native?

Есть много различий между React и React Native. Эти различия становятся более заметными по мере приближения к производству.

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

Вот 3 основных отличия, с которыми столкнется разработчик Reactjs при работе с React Native в первый раз.

1. Группировка элементов

В React для группировки некоторых элементов и создания визуальных блоков кода мы в основном используем div. Вот пример:

Однако этот код не будет работать в React Native. Поскольку код React Native должен сопоставляться с нативными компонентами на мобильных устройствах, нам нужно использовать компонент View вместо div. Давайте изменим приведенный выше пример, чтобы он работал в React Native:

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

Итак, в приложении React Native больше не используются div. Вместо этого необходимо использовать компонент View. Вы можете думать о компоненте View как об альтернативе React Native для div. Когда дело доходит до различий между React и React Native, эти компоненты пользовательского интерфейса легко выделяются.

Говоря о различиях, вы заметили, как классы row и container применялись в React Native? Это второе отличие.

2. Стилизация без файлов CSS

В отличие от React, React Native не стилизует компоненты с помощью файлов CSS. Все необходимые стили должны быть созданы с помощью компонента StyleSheet. Возьмем пример из первого пункта. На этот раз обратите внимание и на стили:

Это выглядит знакомо? Должно. Это похоже на то, как встроенные стили пишутся в React. Есть также несколько отличий.

В React padding: '20px' будет типичной строкой встроенного стиля. В React Native вместо этого будет padding: 20. Конечно, что-то вроде padding: '5%' в React Native пишется так же.

Имейте в виду, что некоторые атрибуты стиля могут не работать с относительными единицами, такими как % em rem. Если вы хотите использовать эти относительные единицы для этих атрибутов, доступен пакет. Ссылка будет в конце этой статьи.

Еще одна вещь, о которой следует помнить, это то, что сокращенный синтаксис для различных атрибутов CSS недоступен в React Native. Например, взгляните на следующее сравнение между свойством внутри файла CSS и его эквивалентом в React Native:

Хотя эти полные формы также можно использовать в CSS, для удобства обычно используется сокращенная форма. Однако в React Native эти сокращения использовать нельзя.

3. Макет по умолчанию для всех элементов

В React Native все компоненты имеют отображение гибкости и направление столбца по умолчанию. Так что нет необходимости указывать display: flex. Поскольку flexbox по умолчанию включен везде, стилизовать макет становится проще.

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

Я думаю, что это направление по умолчанию имеет смысл, если учесть, как обычно держат мобильное устройство в портретном режиме.

Подведение итогов

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

Это также облегчает начало работы с React Native, если вы работали с Reactjs.

Различия между React Native и React связаны с разными целями — мобильное приложение вместо веб-приложения. В остальном опыт разработки аналогичен работе с Reactjs.

Полезные ресурсы

  1. Этот пакет — обходной путь для использования процентной единицы для адаптивного пользовательского интерфейса.
  2. Официальная документация по развертыванию приложений React Native как для Android, так и для iOS написана хорошо.
  3. Вот — еще одна отличная статья о развертывании приложений React Native.
  4. Expo — это фреймворк, который помогает быстро разрабатывать, создавать и развертывать приложения React Native.
  5. Ваше приложение React Native имеет сложную структуру навигации? Эта статья может вам помочь.

Первоначально опубликовано в моем блоге.