React Native ilovalarini yaratish bo'yicha eng yaxshi amaliyotlar - 1 qism

1-rasm: React logotipi bilan mavhum rasm

Agar siz Reaktiv Native dunyosida yangi bo'lsangiz, ehtimol ba'zi muammolarni oldini olishni xohlaysiz, ba'zi hollarda siz ular qanchalik muhimligini bilmasdan tanlov qilishingiz kerak bo'ladi.

Quyida men o'zimning shaxsiy tajribamning eng yaxshi amaliyotlari ro'yxatini tuzdim, umid qilamanki sizga foydali bo'ladi :-)

Expo-Kit-dan faqat nima qilayotganingizni aniq bilsangiz foydalaning

Expo React Native uchun bepul va ochiq manbali vositalar tarmog'idir. Ehtimol React Native ilovalari uchun bu eng yaxshi to'plam, ammo cheklovlar bilan birga keladi.

Expo-dan foydalanish:

  • Agar siz tezkor o'yin maydonchasini xohlasangiz va ilovangizning omborini yaratmasangiz. Create-reaktiv-tabiiy-ilovalar to'plami yordamida yangi dastur yarating.
  • Agar siz tiklamoqchi bo'lgan ilovani keng miqyosda tadqiq qilgan bo'lsangiz va uning barcha talablari Expo-ning taklif etadigan echimlarida ko'rib chiqilishi mumkin.
  • Agar Mac kompyuteringiz bo'lmasa va o'z ilovangizni iPhone uchun ham yaratmoqchi bo'lsangiz. Bu bajariladigan IPAlarni qurishda yagona alternativa.

Expo-dan foydalanmang:

  • Agar siz tubjoy reaktsiyalariga yangi kelgan bo'lsangiz va bu "borish" kerak bo'lgan yo'l deb o'ylaysiz. Avval sizning ehtiyojlaringizga mos kelishini tekshiring.
  • Agar siz mahalliy modullarga ega bo'lgan uchinchi tomon RN paketlaridan foydalanishni rejalashtirmoqchi bo'lsangiz. Expo bu funktsiyani qo'llab-quvvatlamaydi va bu holda siz Expo-Kit-ni chiqarib tashlashingiz kerak bo'ladi. Menimcha, biron bir to'plamni chiqarib yubormoqchi bo'lsangiz, avval uni ishlatmang. Ehtimol, siz to'plamni umuman ishlatmagan bo'lsangiz, ishingizni yanada qiyinlashtiradi.

Umuman men Expo juda yaxshi vosita deb o'ylayman va men RN kod parchalarini baham ko'rish uchun Expo Snack-dan foydalanaman. Ammo hozirda bu faqat ma'lum turdagi ilovalarni yaratishda yordam berishi mumkin.

Ilova papkalarini / fayllarini qanday tuzish kerak

Sizni reaktsiyalash Native ilovangizni React ilovangizni tuzishdan hech qanday farqi yo'q. Shunday qilib, agar siz bu haqda bilsangiz, mavjud mantiqqa amal qilishingiz mumkin. Agar siz bunday bo'lmasangiz, unda siz quyida keltirilgan mantiqiy fikrlarni foydali deb topasiz:

Rasm 2: React Native ilovasi uchun fayl / papka tuzilishi
  • Ilovaga "ilova" deb nomlangan papka qo'shing
  • Ilova ichidagi jildlarni yaratish:

aktivlar - Men bu erda 3 tagacha papkadan foydalanaman: shriftlar, piktogrammalar va rasmlar

komponentlar - Bu erda siz reaktsiyaning barcha qismlarini joylashtirasiz. Odatda ushbu tarkibiy qismlar biz "dummy" deb ataydigan tarkibiy qismlardan iborat bo'lib, ular hech qanday mantiqqa ega emas va dastur tomonidan osongina qayta ishlatilishi mumkin.

Ko'rishlar - bu biz birma-bir boshqasiga o'tadigan bizning amaliy ekranlarimiz. Bular ham React komponentlari, ammo ular konteynerlar deb ataydigan narsamiz, chunki ular o'zlarining holatlarini o'z ichiga oladi.

modullar - tegishli ko'rish qismi (JSX) bo'lmagan qismlar mavjud. Bunga odatiy misol ranglar moduli (ilovaning barcha ranglarini o'z ichiga oladi) va dasturlar moduli (qayta ishlatiladigan yordamchi funktsiyalarni o'z ichiga oladi).

xizmatlar - Bular API qo'ng'iroqlarini almashtiradigan funktsiyalardir.

i18n - Bular turli til va mahalliy foydalanuvchilar uchun tarjima qatorlari

Barcha ilovalar ba'zi turdagi konfiguratsiyani talab qiladi, shuning uchun men odatda config.js deb nomlangan faylni yarataman va unga joylashtiraman. Agar konfiguratsiya fayli juda ko'p chiziqlarga ega bo'lsa, biz keyin konfiguratsiya papkasini yaratamiz va fayllarni sozlashni ajratamiz.

Agar sizda davlat menejeri kutubxonasi bo'lsa, uning tarkibiga papkalar ham kerak bo'ladi. Redux holatida yana ikkita papka ishlatiladi, biri harakat uchun, ikkinchisi reduktor uchun. Agar siz tashqi paketdan foydalanmasangiz va React's Context API-ni ishlatishni xohlasangiz, siz o'zingizning provayderlaringizni yaratasiz, ular modullar papkasida yoki provayderlar deb nomlangan yangi papkada joylashtirilishi mumkin.

Boshidanoq ehtiyojlaringizga qarab navigatsiya kutubxonasini tanlang

Afsuski, RN hali ham qat'iy echimni yoki eski Navigator komponentini almashtirishni taqdim etmadi, shuning uchun biz hozirda jamoat echimlariga e'tibor qaratmoqdamiz. Shunday qilib, agar siz loyihani amalga oshirishni boshlamoqchi bo'lsangiz, qaysi navigatsiya kutubxonasidan foydalanish kerakligini va u sizga mos kelishini bilishni xohlaysiz.

Umuman olganda navigatsiya kutubxonalarining ikki turi mavjud. JavaScript navigatorlari va mahalliy navigatorlar. JavaScript-lar JavaScript-da, Native-lar esa tegishli platformaning (Android, iOS) mahalliy modullari sifatida yozilgan va kodni ishlatish uchun JavaScript-ning modullari bilan bog'langan. Birinchisini o'rnatish ancha oson, ikkinchisi esa ancha samarali. Ulardan qaysi biriga kerakligini aniqlash uchun vaqt sarflang va keyin ko'pchilikdan birini tanlang.

Ushbu maqolada men o'qishni tavsiya etadigan React Native dunyosida Navigatsiya tanlovini ishlab chiqish bo'yicha Spenser Karli juda yaxshi ish qildi. Javob sifatida Navigatsiya JavaScript yechimi va Native yechimi sifatida React Native Navigatsiya ustunlik qiladi.

Qulaylik uchun CSS-in-JS o'rash kutubxonasidan foydalaning

React Native-da CSS JavaScript-da yozilgan. Bu biz tanlay olmaydigan narsadir. Shaxsan StyleSheet.create usuli va CSS-ni toza JavaScript sifatida ishlatish o'rniga men Styled Componentlar kutubxonasidan foydalanishni ma'qul ko'raman. Styled Componentlar CSS yozishni yana sezgir qiladi va JSXni semantik ko'rinishga olib keladi.

Yaqinda men Reaktiv Native ilovalarida Styled Componentlardan foydalanishni afzal ko'rganim haqida maqola yozdim, shunda siz u erda batafsilroq ma'lumot olishingiz mumkin.

Ilovangizni turli xil qurilmalar va ekran o'lchamlari bo'yicha "ko'lamini" kattalashtirishni avvaldan hal qiling

Siz bir nechta qurilma va ekran o'lchamlari uchun ilovani ishlab chiqmoqdasiz. Endi bu erda sizning dizayni / ishlanmasiga qanday murojaat qilishning ikkita varianti mavjud.

Siz ekran o'lchamiga qarab turli xil UI / UX ni tanlashni tanlashingiz mumkin. Ehtimol, bu ko'pgina ilovalar uchun eng yaxshi variant, lekin ko'p harakatlarni talab qiladi, chunki loyihalash va amalga oshirish uchun bir nechta ekran mavjud. Ekranlar o'lchamini Dimension API orqali aniqlash mumkin. Shu bilan bir qatorda, siz qutida bo'lmagan ba'zi yordam dasturlarini taqdim etadigan uchinchi tomon paketidan foydalanishingiz mumkin, masalan React Native Responsive UI.

Yoki siz ekranning barcha o'lchamlari uchun mutanosib ravishda teng keladigan UI / UX ni tanlashni tanlashingiz mumkin. Masalan, siz o'yinni rivojlantirayotgan bo'lsangiz, bu eng yaxshi variant. Shunga qaramay, React Native Responsive Screen kabi maqsadlarga erishish uchun siz uchinchi tomon paketidan foydalanishingiz mumkin.

Rad etish: Men React Native Responsive Screen paketini ishlab chiqaruvchiman.

Ehtiyotkorlik bilan animatsiyalarga murojaat qiling

Mobil ilovalar uchun animatsiyalar juda muhim, ammo React Native unumdorligi hali yaxshi emas.

O'zingizni yomon natijalarni berishdan himoya qilish uchun har doim qurilmada animatsiyalarni sinab ko'rishingiz kerak - emulyator tegishli fikrlarni bildirmaydi. Qaerda bo'lmasin, siz Use useNativeDriver-dan (haqiqiy qiymat bilan belgilangan) foydalanishingiz kerak, chunki bu sizga yanada yaxshiroq ishlashga yordam beradi.

Unumdorlikni oshirish bo'yicha qo'shimcha maslahatlar uchun ushbu maqolaning oldingi sahifasini ko'rib chiqing.

Shuni ham yodda tuting ...

  1. React Native dasturida DOM elementlari mavjud emas. Buning o'rniga biz mahalliy elementlar bilan shug'ullanmoqdamiz.
  2. CSS haqida:
  • Hamma xususiyatlar qo'llab-quvvatlanmaydi; hech bo'lmaganda hali yo'q. Qo'shimcha ma'lumot olish uchun hujjatlarni tekshiring: Style Props, Image Style Props, Text Style Props-ni ko'ring
  • Stsenariy xususiyatlar yaxshi ishlamaydi, shuning uchun har doim o'ziga xos xususiyatlarni afzal ko'ring (masalan, margin-pastki, margin-top, margin-chap, marj-o'ng o'rniga marj-o'ng).
  • Hamma xususiyatlar foiz ko'rsatkichlarini qo'llab-quvvatlamaydi. Bir nechtasini aytib o'tamiz: chegara, chegara-kenglik va chegara-radius. Va agar kimdir foiz qiymatini belgilashga harakat qilsa, RN uni butunlay e'tiborsiz qoldiradi yoki dastur ishdan chiqadi.
  • RN qutidan tashqarida egiluvchan yordam beradi. Uni o'rganing va iloji boricha foydalaning. Siz eng yaxshi CSS ittifoqchisiz!

Siz nima deb o'ylaysiz?

Ushbu maqola haqida nima deb o'ylaysiz? Xo'sh, yana qanday yaxshi amaliyotlarni eslaysiz? Quyidagi sharhlar bo'limida o'z nuqtai nazaringiz va g'oyalaringizni taklif eting.

Agar siz ushbu maqolani yoqtirgan bo'lsangiz, uni boshqalar topishi uchun cl tugmachasini bosing.

Men haqimda

Salom, men Tasosman; veb-saytlarni yaxshi ko'radigan va hozirda React Native va React bilan ko'p ishlaydigan dasturiy ta'minot muhandisi. Men Coded Lines dasturiy ta'minot agentligining asoschilaridaman, u erda biz mobil va veb-loyihalarni dastur ichidagi marketingga alohida e'tibor qaratgan holda amalga oshiramiz. Agar bu siz qidirayotgan narsaga mos kelsa, iltimos, men bilan bu erga murojaat qiling: tasos.maroudas@codedlines.com. To'xtatganingiz uchun rahmat :)

___________________________________________________________________

Rahmat

Daliliy o'qish uchun Jorj Karbulonis