Приступая к работе с React Native? Прочтите это в первую очередь!
Несколько месяцев назад я начал свой путь с React Native. Я нашел это одновременно сложным и приятным. Начать работу с React Native не так гладко, как со многими другими фреймворками, но как только вы пройдете через это, вы довольно скоро почувствуете себя комфортно (особенно если вы уже компетентны в Javascript). Вот несколько вещей, которые я узнал по пути, которые будут вам полезны, если вы также начинаете путешествие по React Native.
- Использование оператора && для условного рендеринга
Для условного рендеринга компонентов в React очень часто используется оператор &&. Например, предположим, что мы хотим отображать сведения о пользователе (с помощью компонента UserDetails ), когда пользователь вошел в систему. Мы можем сделать это, как показано ниже.Это работает так: если значение перед оператором && является правдивым (новый жаргон JS? Проверьте это), то отображается значение справа от оператора &&.
Однако при использовании оператора && нужно соблюдать особую осторожность. Допустим, внутри компонента UserDetails мы хотим отображать адрес электронной почты пользователя только тогда, когда он присутствует. Таким образом, мы можем снова использовать тот же оператор &&, что и ниже.
Но подождите, если emailAddress - пустая строка, ваше приложение выйдет из строя. Да, действительно бы рухнул. Это связано с тем, что в react native каждая строка (даже пустая строка) должна быть в теге для отображения на экране. Поэтому, когда emailAddress представляет собой пустую строку, он оценивается как ложное значение и, следовательно, тег справа от оператора && не отображается, вместо этого приложение пытается напрямую отобразить строку emailAddress, которая имеет значение «», и происходит сбой.
То же самое и с условным рендерингом на основе целых чисел. Например, вы хотите отображать цену только тогда, когда она не равна нулю. Вы можете сделать это, как показано ниже
Это снова приведет к сбою приложения, если product.price имеет значение 0, опять же по той же причине.
Итак, как нам решить эту проблему? Что ж, у нас есть два простых способа
1. Убедитесь, что значение слева от оператора && является логическим.
2. Используйте тернарный оператор - Различное поведение на Android и iOS
Всегда имейте в виду, что хотя большая часть кода, работающего на Android, будет работать напрямую на iOS и наоборот, тем не менее, будут некоторые вещи, которые будут вести себя по-другому. Например, тень и высота по-разному действуют на Android и iOS.
Также нативные компоненты могут вести себя по-разному на Android и iOS. Например, компонент «Выбор» по-разному работает на Android и iOS.
- Всегда старайтесь разбивать компоненты на более мелкие компоненты
Бывают случаи, когда нам кажется, что нет необходимости делать отдельный компонент для небольшой части экрана. Однако в большинстве случаев это хорошая идея - переместить это в отдельный компонент. Это помогает вам во многих отношениях в долгосрочной перспективе1. Его легко реорганизовать (при необходимости) на более позднем этапе.
2. Переместить / изменить часть экрана проще, поскольку она уже независима.
3. Ваш код свободен от ненужной тесной связи различных целей.Обратитесь к официальной документации для примера.
- Попробуйте загрузить изображения из CDN
Это скорее общее руководство, которому нужно следовать при работе с мобильными приложениями. Основное различие в разработке веб-приложений и мобильных приложений заключается в гибкости обновления / исправления ваших приложений. В случае веб-приложений вы можете отправлять обновления, когда захотите, и люди получают их практически мгновенно. Однако в случае с мобильными приложениями, как только вы обновите приложение со своей стороны, пользователи будут решать, когда они наконец обновят свое приложение и получат последнюю версию. Кроме того, очень частая отправка обновлений также может раздражать ваших пользователей, когда им приходится часто обновлять ваше приложение.Теперь, возвращаясь к теме загрузки изображений из CDN, рекомендуется всегда загружать изображения из CDN по следующим причинам.
1. Уменьшен размер APK.
2. Пользователи более старых версий приложения мгновенно получают обновленные значки / изображения.
Одна конкретная проблема, с которой я столкнулся, заключалась в том, что у меня было несколько фоновых изображений для каждого тега в приложении. Я хотел ввести новый тег. Мне удалось легко ввести новый тег, внося некоторые изменения в бэкэнд. Но подождите, а как насчет фонового изображения только что добавленного тега? Я понял, что фонового изображения для этого нового тега не было в ресурсах приложения, и поэтому, даже если я отправлю новое обновление с добавленным этим изображением, люди, использующие более старую версию, все равно смогут увидеть этот тег без фонового изображения. .
Расскажите мне о своем мнении и опыте работы с React Native в комментариях ниже. Не стесняйтесь обращаться ко мне в LinkedIn.