React Native Navigation-da açılış ekranını necə tətbiq etmək olar

Yerli naviqasiya cavab verir

Bu dərslik sizə Android və iOS-da React Native Navigation (RNN) içindəki açılış ekranını necə düzgün bir şəkildə tətbiq edəcəyinizi göstərəcəkdir.

RNN Android platformasında Splash Screen üçün daxili dəstəyə malikdir və biz iOS üçün ImageLaunch istifadə edə bilərik. Buna görə əlavə ekran ekran kitabxanasından istifadə etmək lazım deyil.

Dəyərli vaxtınızı bu təlimata sərf etməzdən əvvəl nəticələrin nə olacağını bilmək vacibdir. Buraya baxın:

Bu nümunədə, Android üçün Aktivləri və iOS üçün LaunchImage-i tez analiz etmək üçün generator-rn-toolbox istifadə edirəm. İstəmirsinizsə, bundan istifadə etmək lazım deyil. Ancaq belədirsə, onda:

  • Generator-Rn-Toolbox quraşdırın
  • Xoş şəkil (2208 x 2208 piksel) hazırlayın və layihə qovluğuna kopyalayın. Bu təlimatda, aktiv adı splashscreen.psd-dir

Android

RN Toolbox ilə Android Aktivləri Yaradın (istəyə görə)

Aşağıdakı əmri işə salın:

$ yo rn-alət qutusu: aktivlər - splash splashscreen.psd --android

Bu sualları verəcəksiniz:

  • Layihə Adı: Layihə adınızı daxil edin və ya təklif düzgündürsə onu daxil edin.
  • Styles.xml-in üzərinə yazın: "n" daxil edin (yox), sonra daxil edin.
  • Colours.xml-in üzərinə yazın: "y" yazın (bəli) və sonra daxil edin (sadəcə colours.xml-in mövcud olub olmadığını soruşun).

Ssenari əlavə edəcək / dəyişdirəcək:

  • Launch_screen.png adlı çəkilə bilən elementlər əlavə edin
  • Launch_screen_bitmap.xml adını əlavə edin. Bu faylı ilk ekran düzeni arxa görüntüsü olaraq istifadə edəcəyik
  • Colors.xml-ə bir splashBackground elementi əlavə edin. Rəng kodu əsas giriş rəngidir

Qeyd: styles.xml sənədindəki dəyişiklikləri, skript işləyərkən təsadüfən onların üzərinə yazsanız, onları ləğv etməlisiniz.

Bu işin 80% -dən çoxunu edəcəkdir. Android təlimatının 4-cü addımına keçin.

Android təlimatı (4 addım)

Addım 1 (alət qutusundan istifadə edirsinizsə keçin) / Android / app / src / main / res / öz aktivlərinizi kopyalayın və üzərinə yazın.

Addım 2 (Toolbox istifadə edirsinizsə keçin) Aşağıdakı məzmunu ilə yeni bir layout faylı yaradın:

Qeydlər:

  • Toolbox istifadəçisi ilə sinxronizasiya etmək üçün launch_screen_bitmap adından istifadə edirəm. İstəsəniz bu fayl üçün fərqli bir ad istifadə edə bilərsiniz.
  • @ Drawable / launch_screen-i varlığınızın adı ilə əvəz edin.

addım 3

Açıq ekranınızın arxa rəngi ilə rəngli faylınızı yaradın / dəyişdirin. Bu, bəzi cihazlarda ağ məsafənin qarşısını alır.

Qeyd: Standart RGBA əvəzinə onaltılıq bir rəng kodu istifadə etdiyinizə əmin olun (bu sayda bunu göstərdiyiniz üçün təşəkkür edirik).

Addım 4

RNN tərəfindən yaradılmış CreateSplashLayout metodunu ləğv edərək MainActivity.java sənədini dəyişdirin.

Android üçün bütün addımlar budur, lakin sonunda Android və iOS platformaları üçün bonus bir addım var.

iOS

RN Toolbox ilə Android Aktivləri Yaradın (istəyə görə)

Aşağıdakı əmri işə salın:

$ yo rn-alət qutusu: aktivlər - splash splashscreen.psd --ios

Bu sualları verəcəksiniz:

  • Layihə Adı: Layihə adınızı daxil edin və ya təklif düzgündürsə onu daxil edin
  • Project.pbxproj-in üzərinə yazın: "y" yazın (bəli) və Enter düyməsini basın
  • Info.plist-in üzərinə yazın: "y" yazın (bəli) və Enter düyməsini basın

Bu aşağıdakıları əlavə edəcək / dəyişdirəcək:

  • Təhlil olunan varlıqları ehtiva edən yeni bir LaunchImage.launchimage faylı yaradın
  • Info.plist-dən UILaunchStoryboardName düyməsini və dəyərini silin
  • Debug and Release build parametrləri üçün ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME konfiqurasiyasını əlavə edin

Bu işin hamısını edir. Başqa bir şey etmək lazım deyil.

iOS Kılavuzu (3 addım) - Yalnız əl ilə

Addım 1

Xcode layihənizi / ios / içərisində birbaşa layihə adına açın.

Şəkil nümunəsinə başlayın

addım 2

Info.plist-də UILaunchStoryboardName açar / dəyər cütlərini silməklə standart cavab vermə cavab ekranını silin.

addım 3

Başlanğıc şəklini Ümumi nişanı> Tətbiq nişanları və başlatma şəkilləri altında tətbiq edin Başlat Şəkillər mənbəyini yeni yaradılan LaunchImage-ə dəyişdirin

LaunchImage qurma nümunəsi

Hər şey iOS üçün. Android və iOS üçün aşağıdakı bonus addımı yoxlayın.

Bonus addımı

AnimationType əlavə edin: Tətbiqi startTabBasedApp və ya startSingleScreenApp ilə başladınızsa, keçid daha hamar olacaq.

RN Toolbox Qeydləri

  • Platforma bayrağını göstərmədən eyni zamanda Android və iOS üçün aktivlər yaratmaq üçün alətlər qutusunu işə sala bilərsiniz. Lakin dəyişiklikləri izləmək daha çətin olacağından bu tövsiyə edilmir
  • Əməliyyatdan sonra splashscreen.psd faylını saxlamağınıza ehtiyac yoxdur
  • Varlıqların yaradılması bütün cihaz ölçülərində işləməyə bilər. Açıq ekran elementlərini dizayn qrupunun mənbələri ilə əvəz etməyiniz tövsiyə olunur

Son

Bu Medium haqqında ilk məqaləmdir. Beləliklə, hər hansı bir səhv və ya problem varsa, xahiş edirəm bir şərh buraxın.

Bu nümunənin mənbə kodunu burada tapa bilərsiniz. Hər açıqlamada dəyişiklikləri görmək üçün öhdəliyi nəzərdən keçirə bilərsiniz.

Ümid edirəm ki, bu təlimat RNN Splash Screen tətbiq edərkən qarşılaşdığınız problemləri həll etməyə kömək edəcəkdir :)