Бестолковый взгляд на React Native: настройка

Я использую React пару лет, но никогда особо не интересовался React Native.

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

Также несколько лет назад я разработал приложение с PhoneGap, но в то время эмулятор Android был мучительно медленным, и при развертывании приложения на реальном устройстве все выглядело и вело себя по-другому. Но, наверное, это была моя вина 😅

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

Однако в последние несколько месяцев я начал все больше и больше изучать его и обнаружил огромное количество инструментов и библиотек, которые значительно упрощают и ускоряют разработку.

Прежде всего c reate-react-native-app для быстрой настройки проекта с (почти) нулевой конфигурацией, Expo для развертывания и публикации приложения без необходимости самостоятельно упаковывать его для iOS и Android…

Так что мне пришлось попробовать и начать что-то с ним создавать.

ПРИМЕЧАНИЕ. Я должен сказать, что занимаюсь только разработкой для Android, так как у меня нет iPhone или iPad, которые можно было бы использовать для тестирования, или даже Mac, и мне это особо не важно.

ПРИМЕЧАНИЕ. Я также должен сказать, что я использую Windows 10. С Mac вы, вероятно, столкнетесь с другими проблемами или, возможно, не столкнетесь с ними вообще.

Подключение к реальному устройству

Первым делом я последовал инструкциям create-react-native-app, чтобы настроить новый проект.

Скачал на телефон приложение Expo, выполнил

yarn start

на терминале все выглядело правильно.

Затем я использовал QR-код, чтобы открыть приложение… бум, что-то пошло не так.

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

На самом деле, мне следовало более внимательно прочитать документацию, как это даже сказано в Руководстве пользователя:

В некоторых случаях это далеко не идеально. Это может быть так, если вам нужно запустить свой проект внутри виртуальной машины, и вам нужно получить доступ к упаковщику через IP-адрес, отличный от того, который печатается по умолчанию. Чтобы переопределить IP-адрес или имя хоста, обнаруженные приложением Create React Native, вы можете указать собственное имя хоста через переменную среды REACT_NATIVE_PACKAGER_HOSTNAME.

В Windows они предлагают использовать

set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'

Где my-custom-ip-address-or-hostname можно найти, выполнив ipconfig,, запомнив IPV4-адрес правильного сетевого интерфейса, в моем случае «Wi-Fi».

После этого вы сможете снова выполнить yarn start и приступить к работе.

Нет. У меня все еще не работает. Что-то снова пошло не так!

Еще больше покопавшись, я нашел этот полезный комментарий, в котором говорится, что при использовании Git Bash для Windows фактическая команда

export REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'

И на самом деле вы можете проверить, используете ли вы правильный IP-адрес, проверив вывод CLI, напечатанный сразу после QR-кода.

Ваше приложение теперь работает по URL-адресу: exp: //192.168.1.3: 19000

Это мой локальный IP! Действительно, теперь я мог успешно просматривать приложение на своем телефоне.

ПРИМЕЧАНИЕ: если это не помогло, убедитесь, что порты 19000 и 19001 не заблокированы брандмауэром.

Подключение к эмулятору

Эмуляторы - это круто, теперь я даже предпочитаю их настоящему устройству по нескольким причинам:

• Нет расхода батареи.
• Они быстрые. В режиме разработки они даже быстрее, чем реальное устройство, по крайней мере, исходя из моего ограниченного опыта, имея старый Sony Xperia Z1 compact в качестве реального устройства.
• Возможность тестирования на нескольких устройствах и версиях Android без необходимости покупать десятки реальных устройств.
• Нет проблем, связанных с сетью.

Хотя вы, вероятно, можете исправить некоторые из них, подключив свой настоящий телефон через USB.

Настройка эмулятора была относительно простой. Я подписался на https://docs.expo.io/versions/latest/workflow/android-studio-emulator

После загрузки и установки Android Studio важно добавить adb в переменную окружения PATH.

Как и следовало ожидать, в приведенной выше статье нет никакого отношения к Windows. Тем не менее, вы можете выяснить, как добавить в PATH в Windows с помощью простого поиска в Google (если вам даже нужно его найти).

Однако добавление местоположения SDK в PATH не помогло, поскольку команда adb нигде не была найдена, закрытие и повторное открытие терминала не помогло.

Еще раз погуглил, и я обнаружил, что исполняемый файл adb находится в подкаталоге platform-tools, это означает, что в моем случае мне пришлось добавить «C: \ Users \ maluen \ AppData \ Local \ Android \ Sdk \ platform- tools \ ” в ПУТЬ.

Другой важный шаг - создание виртуального устройства (эмулятора) с помощью AVD Manager в Android Studio. В руководстве Expo указано, что его можно найти в «Инструменты -› Android - ›AVD Manager».

У меня его не было. Еще раз погуглил, и я понял, как это сделать. Мне пришлось создать проект (никогда этого не делал раньше), затем мне пришлось нажать «Ctrl + Shift + a» и ввести «AVD Manager» в поле поиска.

Затем я без проблем создал виртуальное устройство, и теперь я даже вижу AVD Manager в разделе «Инструменты -› Android », не спрашивайте меня, почему.

Затем я был готов и взволнован, чтобы запустить приложение на эмуляторе, поэтому я просто нажал «а» на терминале и надеялся на лучшее. Понятно, что не получилось, на самом деле эмулятор надо запускать самому.

Вы можете проверить, какие устройства подключены и готовы к использованию, выполнив adb devices. Если вы не видите там эмулятора, значит, вы сделали что-то не так.

Замечание о скорости

Я начал возиться с CRNA (create-react-native-app) на реальном устройстве, вызвав setState, чтобы запустить повторный рендеринг; к моему удивлению, это было мучительно медленно, как будто каждое обновление состояния имело задержку в 200–500 мс.

Вначале я думал, что виноват мой код, но на самом деле я не делал ничего особенного.

Я также знал, что нельзя винить response-native, так как в настоящее время тысячи разработчиков и даже крупные компании используют его в продакшене.

Некоторое исследование привело меня к разделу режима разработки документации Expo:

За это приходится платить: ваше приложение работает медленнее в режиме разработки. Вы можете включать и выключать его из XDE. При переключении просто закройте и снова откройте приложение, чтобы изменения вступили в силу. Каждый раз, когда вы тестируете производительность своего приложения, обязательно отключите режим разработки.

Действительно, я перестроил приложение в производственном режиме, и оно было невероятно быстрым!

ПРИМЕЧАНИЕ. Я заметил, что при запуске того же приложения на эмуляторе оно работает намного быстрее, чем на реальном устройстве, почти с той же скоростью, что и в рабочей среде. Это могло относиться только к моему устройству или к простому приложению, которое я запускал.

Горячая перезагрузка

Честно говоря, Hot Reloading больше не доверяю. Даже с обычными приложениями React он всегда работает непоследовательно, возможно, он работает для простых изменений CSS, но иногда это не так, казалось бы, случайным образом.

Это похоже на CRNA: вы меняете какой-то файл, может быть, просто меняете какой-то текст, на устройстве вы видите всплывающее окно «Перезагрузка», но на самом деле ничего не изменилось. В других случаях это просто работает.

Такое непоследовательное поведение весьма раздражает во время разработки, поскольку, если вы не можете доверять инструментам, которые используете, то вы действительно не знаете, не работает ли что-то из-за введенной вами ошибки (где-то отсутствует точка с запятой 😏 ), или просто потому, что инструмент тогда не работал.

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

Когда происходит такая перезагрузка, вы можете предположить, что все было обновлено. В противном случае - нет.

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

ПРИМЕЧАНИЕ: при использовании эмулятора, поскольку я не могу встряхнуть его по очевидным причинам, я закрываю приложение и нажимаю "a" в терминале, чтобы автоматически повторно открыть обновленное приложение.

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

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

Идти дальше

Когда все было готово, следующим шагом было начало реальной разработки.

Целью моего первого приложения было сосредоточиться на чем-то простом, с помощью которого я мог бы познакомиться с основными концепциями React Native API, Expo, обработки жестов, анимации и так далее.

Поэтому я решил создать клон Android Calculator, такой оригинальный.

Прочтите следующую статью, чтобы узнать, что пошло не так дальше и как мне удалось преодолеть проблемы более невежественными способами!

Если у вас есть предложения о том, как быть менее непонятливым, напишите их в разделе комментариев ниже.