Приступая к работе с React Native? Прочтите это в первую очередь!

Опубликовано: 9 Июля, 2021

Несколько месяцев назад я начал свой путь с React Native. Я нашел это одновременно сложным и приятным. Начать работу с React Native не так гладко, как со многими другими фреймворками, но как только вы пройдете через это, вы довольно скоро почувствуете себя комфортно (особенно если вы уже компетентны в Javascript). Вот несколько вещей, которые я узнал по пути, которые будут вам полезны, если вы также начинаете путешествие по React Native.

  1. Использование оператора && для условного рендеринга
    Для условного рендеринга компонентов в React очень часто используется оператор &&. Например, предположим, что мы хотим отображать сведения о пользователе (с помощью компонента UserDetails ), когда пользователь вошел в систему. Мы можем сделать это, как показано ниже.

    Это работает так: если значение перед оператором && является правдивым (новый жаргон JS? Проверьте это), то отображается значение справа от оператора &&.

    Однако при использовании оператора && нужно соблюдать особую осторожность. Допустим, внутри компонента UserDetails мы хотим отображать адрес электронной почты пользователя только тогда, когда он присутствует. Таким образом, мы можем снова использовать тот же оператор &&, что и ниже.

    Но подождите, если emailAddress - пустая строка, ваше приложение выйдет из строя. Да, действительно бы рухнул. Это связано с тем, что в react native каждая строка (даже пустая строка) должна быть в теге для отображения на экране. Поэтому, когда emailAddress представляет собой пустую строку, он оценивается как ложное значение и, следовательно, тег справа от оператора && не отображается, вместо этого приложение пытается напрямую отобразить строку emailAddress, которая имеет значение «», и происходит сбой.

    То же самое и с условным рендерингом на основе целых чисел. Например, вы хотите отображать цену только тогда, когда она не равна нулю. Вы можете сделать это, как показано ниже

    Это снова приведет к сбою приложения, если product.price имеет значение 0, опять же по той же причине.

    Итак, как нам решить эту проблему? Что ж, у нас есть два простых способа
    1. Убедитесь, что значение слева от оператора && является логическим.
    2. Используйте тернарный оператор

  2. Различное поведение на Android и iOS



    Всегда имейте в виду, что хотя большая часть кода, работающего на Android, будет работать напрямую на iOS и наоборот, тем не менее, будут некоторые вещи, которые будут вести себя по-другому. Например, тень и высота по-разному действуют на Android и iOS.

    Также нативные компоненты могут вести себя по-разному на Android и iOS. Например, компонент «Выбор» по-разному работает на Android и iOS.

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

    1. Его легко реорганизовать (при необходимости) на более позднем этапе.
    2. Переместить / изменить часть экрана проще, поскольку она уже независима.
    3. Ваш код свободен от ненужной тесной связи различных целей.

    Обратитесь к официальной документации для примера.

  4. Попробуйте загрузить изображения из CDN

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

    Теперь, возвращаясь к теме загрузки изображений из CDN, рекомендуется всегда загружать изображения из CDN по следующим причинам.
    1. Уменьшен размер APK.
    2. Пользователи более старых версий приложения мгновенно получают обновленные значки / изображения.

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

Расскажите мне о своем мнении и опыте работы с React Native в комментариях ниже. Не стесняйтесь обращаться ко мне в LinkedIn.