React Native - 1x03 ilə cavabdeh istifadəçi interfeyslərini necə inkişaf etdirmək olar

Bu hekayə React Native ilə təcrübəmizi bölüşəcəyim bir seriyanın bir hissəsidir: RN komponentləri, API, xarici paketlər və hər cür problemlə necə məşğul olduğum və necə işlədiyim. Ümid edirəm bu yazı seriyası faydalı olacaq və React Native cəmiyyətinə faydalı anlayışlar təqdim edəcəkdir.

EDİT: Burada izah olunan kod, "Native Responsive Screen" adlı pulsuz, açıq mənbəli paket vasitəsilə tam bir həll şəklində mövcuddur. Bunu sınayın və istifadəsinin nə qədər asan olduğunu öyrənin! Proqramlaşdırma əylənin :-)

Cavab verən istifadəçi interfeysi nədir?

Cavab verən istifadəçi interfeysi vacibdir! Heç bir istifadəçi interfeysi geliştiricisi bunu inkar edə bilməz, əksəriyyətimiz bir nöqtədə birini təqdim etmək üçün mübarizə aparmışıq. React Native geliştiricisi olaraq, artıq fərqli ölçülü, qiymətləndirmə, miqyaslandırma faktorları, piksel sıxlığı və s.-lə bir çox mobil və tablet ekranları üçün eyni və ya çox oxşar bir nəticə verməlisiniz.

Şəkil 1: Birdən çox cihazda cəlbedici bir istifadəçi interfeysi necə görünür

RN ilə proqramlaşdırmaya başlayanda düşündüm:

Həssaslığı yaxşılaşdırmaq üçün bir çərçivənin daxili mexanizmi olmalıdır - yoxsa ən pis ssenaridə faizləri hər yerdə istifadə edəcəyəm ...

Hər iki fərziyyə də səhv idi ... Ancaq ilk istifadəçi interfeysimi inkişaf etdirməyə başlayanda bunu çətin şəkildə aşkar etdim.

CSS faizi tam dəstəklənmir

Bu, əvvəlki ilə nisbətən xeyli yaxşılaşsa da, yenə də belədir. RN-də faizləri dəstəkləməyən CSS xüsusiyyətləri var, baxmayaraq ki, bu "normal" veb inkişafında belədir. Yalnız bir neçəsinin adını çəkmək olar: Margin, Margin Width və Margin Radius. Və kimsə bir faiz təyin etməyə çalışırsa, RN ya bunu tamamilə görməzlikdən gəlir ya da proqram çökür.

Zamanla inkişaflar ediləcək və dəstək əlavə ediləcəkdir. Çerçevenin yetişməsini gözləmək, onsuz da istehsal tətbiqlərində React Native istifadə edən insanlar üçün qadağandır. Komandamızın bir həll yolu və işimizin əsl nümunəsini necə tapdığını göstərən bir neçə RN mexanizminə daha yaxından baxmaq üçün mənimlə qalın.

Yerli və müstəqil piksellərə cavab verin

CSS dəyərini React Native-də "piksel" olaraq kodlaşdırarkən əslində ekran pikselləri deyil, müstəqil piksellərdir (dp və ya dpi). RN-nin daxili istifadə etdiyi fərqli bir ölçü vahidi (ehtimal ki, Android inkişafındakı istifadəsindən ilham almışdır).

Aşağıdakı kodu nəzərdən keçirək (birbaşa RN StyleSheet komponentinə daxil olmaqdan daha çox formatlaşdırılmış komponentlər üçün paket və sintaksis istifadə edirik):

const HeaderText = tərzli.Text` doldurma: 20; Şrift ölçüsü: 15; Şrift ailəsi: Kano; En: 100%; Mətn hizalaması: mərkəz; ';

Dolu üstü və şrift ölçüsü xüsusiyyətlərinin sadə rəqəmlər kimi yazıldığını, yanında PX şəkilçisi olmadığını görə bilərsiniz. Həqiqi ekran piksellərini tapmaq üçün aşağıdakı tənlikdən istifadə edə bilərik:

px = dp * scaleFactor

Daha çox məlumat üçün Android Piksel Sıxlığı Bələdçisinə, Android Ekran Uyumluluğu Qrafikinə və iPhone Qətnamələri üçün PaintCodeapp Bələdçisinə baxın.

Buradakı kimsə hər yerdə müstəqil piksellərdən istifadə edə biləcəyimizi və axtardığımız cavab verən istifadəçi interfeysini əldə edə biləcəyimizi düşünür. Təəssüf ki, bu belə deyil, çünki scaleFactor piksel sıxlığından asılıdır. Deyilənə görə, yalnız tətbiqin çalışacağı bütün cihazların ekranlarında eyni piksel sıxlığı (ppi) olsaydı, müstəqil piksellərə sahib bir tətbiq inkişaf etdirə bilərik. Əslində, hər bir istehsalçı piksel sıxlığı ilə öz ekranlarını yaradır.

Cavab verən istifadəçi interfeysi üçün bir mexanizm inkişaf etdirək

Fikir sadədir. Faiz həmişə işləmədiyi üçün hər bir ekran üçün dinamik olaraq "düzgün" dp dəyərini daxil edirik. Bunun bir nümunəsinə baxaq. Aşağıda Math Warriors Android oyunundakı profil səhnəsini görə bilərik. Aşağı yarıda yerləşən 4 böyük mavi plitələrə diqqət yetirək:

Şəkil 2: Math Warriors Android oyun profil səhnəsi

Dizaynımızın işə yaraması üçün burada əldə etmək istədiklərimiz, plitələrin ekran genişliyinin 98% -ni dp-də, ekranın hündürlüyünün 10% -ni dp-də tutmasıdır. Və hər bir ekran üçün belə olmalıdır. Bu o deməkdir:

Ekranın ölçülərini (enini, hündürlüyünü) dpi ilə müəyyənləşdirin və onları bir faktorla vurun - bizim vəziyyətimizdə eni və hündürlüyü üçün 98% və ya 10%. Kodumuzda rahatlıq üçün aşağıdakı 2 funksiyanı yaradacağıq:

{Dimensions, PixelRatio} 'reaktiv olaraq' idxal edin;
const widthPercentageToDP = widthPercent => {const screenWidth = Dimensions.get ('pəncərə'). genişlik; // simvol sətri girişini onluq ədədi çevirmək const elemWidth = parseFloat (widthPercent);
PixelRatio.roundToNearestPixel (screenWidth * elemWidth / 100) qayıt; };
const heightPercentageToDP = heightPercent => {const screenHeight = Dimensions.get ('pəncərə'). hündürlük; // simli girişi onluq ədədi çevirmək const elemHeight = parseFloat (heightPercent);
PixelRatio.roundToNearestPixel (screenHeight * elemHeight / 100) qayıt; };
İxracat {widthPercentageToDP, heightPercentageToDP};

İndi isə istədiyimiz faizi (eni və ya hündürlüyü üçün) arqument olaraq göstərərək sadəcə profil görünüşümüzdəki funksiyaları çağırırıq. Yuxarıdakı nümunə üçün aşağıdakı kodumuz var (yenə də istifadə olunan komponentlərin üslubuna görə sintaksis yöndəmsizdir):

const Tile = styled.View` width: $ {widthPercentageToDP ('98% ')}; hündürlük: $ {heightPercentageToDP ('10% ')}; . . . ';

Bu şəkildə bütün ekran ölçülərinə uyğunlaşan dinamik bir nəticə əldə edə bilərik!

Nümunəmizi sınayaq!

UI inkişafımızı yoxlamaq üçün nəticələri yoxlamaq üçün istifadə etdiyimiz bir sıra Android və iOS emulatorlarımız var. Kodumuzun istifadəçi interfeysinə necə çevrildiyini görək:

Ağıllı telefonlar

Şəkillər 3, 4, 5: Fərqli piksel sıxlığı, miqyaslandırma faktoru və s. Olan smartfonlarda profil görünüşü.

Tabletlər

Şəkil 6: Fərqli piksel sıxlığı, miqyaslandırma faktoru və s. Olan tabletlərdə profil görünüşü

Nə fikirləşirsən?

Bu həll yolu haqqında nə düşünürsünüz? Aşağıdakı şərhlərdə perspektivinizi və fikirlərinizi təqdim etməkdən çəkinməyin.

EDİT: Burada izah olunan kod, "Native Responsive Screen" adlı pulsuz, açıq mənbəli paket vasitəsilə tam bir həll şəklində mövcuddur. Bunu sınayın və istifadəsinin nə qədər asan olduğunu öyrənin! Proqramlaşdırma əylənin :-)

Bu məqaləni bəyəndinizsə, düyməni basaraq da tapa bilərsiniz.

Mənim haqqımda

Salam, mənim adım Tasos. Veb sevən və hazırda React Native və React ilə çox işləyən bir proqram inkişaf etdiricisi. Tətbiq içi marketinqə diqqət yetirərək geniş mobil və veb layihələr həyata keçirdiyimiz Coded Lines proqram agentliyinin həmtəsisçisiyəm. Aradığınız nə səslənirsə, zəhmət olmasa mənimlə əlaqə saxlayın: [email protected] Dayandığınız üçün təşəkkürlər :)