React Native - Android və iOS-da başlanğıc nişanlarını asanlıqla konfiqurasiya edin

Şəkil 1: Mobil tətbiqetmə başlama ikonlarının xülasə şəkli

Nişanı başlayın! Nə edəcəyimizi bilmiriksə ağrılı bir problemə çevrilə bilən sadə bir tapşırıq. Burada tətbiq etməyimiz lazım olan hər bir yerli platforma üçün iki mərhələli bir prosesdir:

  1. Mümkün olan bütün ekran ölçüləri üçün düzgün ölçülərlə başlanğıc ikonlarını hazırlayın (məsələn, iPhone SE, iPhone 7, iPhone X, və s.).
  2. Onları yerli tətbiq qovluğuna qoyun və mövcud standart qovluqları dəyişdirin.

Əlbətdə, qalan yerli platforma (yəni Android) üçün hər iki addımı da təkrarlayın.

Bununla birlikdə, bu sizin ilk React Native tətbiqinizdirsə və mənim kimi bir veb geliştirici fonuna sahibsinizsə, yuxarıdakı təfərrüatları bilmirsiniz. Heç olmasa hələ.

Buna görə bütün detalları tapmaq əvəzinə hər iki platforma (iOS, Android) üçün bunu tez və asanlıqla etmək üçün bir yol axtarırdım. Xoşbəxtlikdən yolu tapdım: D

Qurtarmaq üçün RN alət qutusu

React Native üçün RN Toolbox adlı bir alət dəsti var. Layihənizə başlamağa kömək edə biləcək bir sıra Yeoman generatorlarıdır.

Qurmaq və istifadə etmək üçün lazım olan hər hansı bir nişanı ölçüsünü dəyişdirmək və yerləşdirmək üçün istifadə edəcəyik! Görüntülərin ölçüsünün dəyişdirilməsi ImageMagick vasitəsi ilə həyata keçirilir, buna görə də bunu quraşdırmalıyıq. Gəlin başlayaq!

Alətləri quraşdırın

RN-Toolbox istifadə edə bilmək üçün ən azı 6 qovşaq qurulmalıdır.

Sonra aşağıda göstərildiyi kimi npm istifadə edərək qlobal olaraq quraşdırırıq:

npm yüklə -g yo generator-rn-toolbox

ImageMagick üçün quraşdırma addımları platformadan asılı olaraq fərqlənir. Hamısını veb saytın yükləmə hissəsində tapa bilərsiniz.

Alətlərdən istifadə edin!

  • 200 x 200 piksellik bir nişan dosyası hazırlayın. Əgər bir nüsxə yoxdursa, sadəcə aşağıdakı nümunədən istifadə edin:
Şəkil 2: Nümunə reaksiya logosu png simvolu 200x200px
  • React Native App kök qovluğuna gedin və aşağıdakı əmri işə salın:
alət qutusu: varlıqlar - elektron

React Native layihənizin adı istənir. Bununla yanaşı, avtomatik olaraq aşkarlanacağı üçün Enter düyməsini basa bilərsiniz. Burada iOS tətbiqi üçün lazım olan və nişanların düzgün yollara düzgün yerləşdirildiyi düzgün ad verdiyinizdən əmin olun. Məsələn, layihənizi reaksiyaya xas olan Init MyReactNativeProject ilə yaratmısınızsa, layihənizin adı MyReactNativeProject-dir.

Contents.json faylının üzərinə yazmaq istənəndə Y cavab verin.

Və bu qədər! Bütün Android və iOS ikonları yaradıldı və uyğun yerli layihələrin yollarına yerləşdirildi! Və burada əla olanı budur ki, bir və ya bir neçəsini əl ilə dəyişdirmək / ölçüsünü dəyişdirmək istədiyimiz halda artıq bütün ikon ölçülərini və uyğun yolları müəyyən edə bilərik.

Bir nümunəyə baxaq:

Şəkil 3: rn-toolbox əmrinin reag-logo.png simvolu ilə icrası

Burada göstərilən nümunədə yuxarıdakı nümunə şəklini 1 başlanğıc işarəsi üçün react-logo.png adı ilə təmin etdik. Nümunə layihənin adı MyReactNativeProject-dir. Sizin vəziyyətinizdə, sonuncusu layihənin həqiqi adı olmalıdır.

Konsol çıxışından da göründüyü kimi, alət yeni başlanğıc nişanı şəkillərinin ölçüsünü dəyişdirdi, onları yaratdı və yerli layihələrin müvafiq qovluqlarında saxladı. Və bunun həqiqətən olub olmadığını görmək üçün Gitin aşkarladığı dəyişikliklərə nəzər salaq.

Şəkil 4: rn-toolbox əmrini icra etdikdən sonra layihə dəyişir

Bəli! Dəyişikliklər görünür və standart Android nişanı artıq təchiz edilmiş ilə əvəz edilmişdir. Hər şeyin düzgün işlədiyinə əmin olmaq üçün yuxarıda əlavə edilmiş / dəyişdirilmiş bütün sənədləri yoxlayıram və sonra başlanğıc simgesinin düzgün işlədiyinə əmin olmaq üçün emulatorlarda / cihazlarda bəzi testləri aparıram.

Şəkil 5: Yeni əlavə edilmiş başlanğıc simvolları ilə nümunə tətbiqetmə (Android menyusuna baxın)Şəkil 6: Hal hazırda işləyən tətbiqlərlə Android hissəsində göstərildiyi kimi yeni əlavə edilmiş başlanğıc işarəsi ilə nümunə tətbiqetmə

Nə fikirləşirsən?

Bu yazı haqqında nə düşünürsünüz? Başlanğıc ikonalarınızı necə dəyişdirirsiniz? Şərh hissəsində perspektivinizi və fikirlərinizi təklif edin.

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 :)

___________________________________________________________________

Çox təşəkkür edirəm

George Karboulonis korrektə üçün