React native splash screen android

Как добавить AppIcon и LaunchScreen в приложение на React Native

Не занимаясь никогда ранее нативной разработкой под мобильные платформы, и в этот раз решил пойти «легким путем» — освоить React Native. Наибольшей трудностью стало добавление иконки приложения(AppIcon) и экрана загрузки (Launch Screen). О чем и хочу рассказать в данной статье тем, кто осваивает React Native.

На момент написания статьи актуальная версия React Native 41.0, XCode 8.2 (эти данные указаны по той причине, что в более поздних версиях может что-то измениться и данный мануал не будет применим).

Создаем React Native приложение

Добавление AppIcon

На iOS

Идем в папку с iOS-частью приложения

и открываем там файл XCode-проекта habr.xcodeproj.

Далее, щелкаем по следующим кнопкам:

В поле 4 добавляем иконки путем перетаскивания их в пустые ячейки. Под ячейками указан размер иконки(в pt).

Получается примерно так:

Важно: картинка иконки должна быть квадратная и, в идеале, их должно быть несколько версий разного размера(под каждую ячейку — свой размер). Если не охота возиться с созданием иконок разного размера — добавьте одну, размером 120x120px, в ячейку для iPhone 7-10:

Если добавить иконки не правильного размера, то получите ошибку «Images.xcassets: The app icon set named “AppIcon” did not have any applicable content.»

Полезно знать: иконки для ios удобнее всего создавать в программе Sketch(доступна только под OS X), поскольку в ней есть шаблоны нужных размеров, которые затем можно экспортировать в png-формат (File → Export. ):

Запускаем сборку ios-версии из корневой папки проекта:

(hit: для «сворачивания» приложения в эмуляторе нужно дважды нажать Cmd+Shift+H)

На Android

Из папки проекта идем в папку с Android-частью приложения, в место хранения ресурсов:

и видим здесь папки:

Заходим в каждую из них и в каждой видим файл ic_launcher.png. Заменяем каждый файл на свой, с таким же именем и такого же размера (в px).

Запускаем сборку Android-версии из корневой папки проекта:

С иконками закончили, переходим к экрану загрузки.

Добавление LaunchScreen

На iOS

Существует по крайней мере 2 способа добавить LaunchScreen на iOS. Опишу тот, который сработал у меня.

Первым делом, идем снова в XCode, по тому же маршруту, который показан на самом первом изображении в этой статье, но вместо папки Images.xcassets, выбираем файл LaunchScreen.xib.

При этом XCode спросит, для какой версии какого устройства отобразить содержимое данного файла. Выбираем любой iPhone.

Далее, щелкаем по кнопкам под номером 3 и 4 на данном скриншоте:

Затем перетаскиваем элемент 5 (Image View) на рабочее поле 6. Имеющиеся в рабочем поле 6 элементы (текстовые надписи) можно удалить.

Следующим шагом добавляем в наш проект нужное нам файл с изображением(для начинающих маководов — контекстное меню вызывается прикосновением к тачпаду двумя пальцами одновременно).

Далее, щелкаем по элементу UIImageView в рабочей зоне и настраиваем его свойства:

В меню под номером 1 (на скриншоте) выбираем добавленную в предыдущем шаге картинку(если выпадающий список пуст, то щелкните в левой панели(там где выбирали файл LaunchScreen.xib по любому другому файлу, а затем снова вернитесь к файлу LaunchScreen.xib — файл появится в выпадающем списке. Это мелкий баг XCode).

В меню под номером 2 выберите «Aspect Fit», чтобы картинка масштабировалась пропорционально, независимо от размера экрана устройства, на котором будет запущено приложение.

Чтобы картинка располагалась строго по центру, щелкните самой картинке(на рабочей области) и нажмите на кнопку 1, как показано на следующем скриншоте:

В каждом из четырех полей «Add new constrains» установите значение 0.

Запускаем сборку ios-версии из корневой папки проекта:

На Android

Из папки проекта идем в папку с Android-частью приложения, в место хранения ресурсов:

Добавляем здесь папку drawable. Создаем в ней файл splash_screen.xml такого содержания

Этот файл описывает новый «ресурс» приложения, и путь к внешним файлам ресурса(в нашем случае — к файлу с изображением для стартового экрана).

эта часть кода указывает расположение ресурса на экране. А эта:

путь к файлу ресурса, относительно папки res.

Создает фоновую подложку к экрану загрузки, а строка

указывает цвет фона. Значение цвета фона берется из файла colors.xml, который пока не существует и который вам нужно создать и расположить по адресу:

Содержимое файла может быть таким:

Здесь каждая строчка вроде

содержит цветовую константу. Задать цветовое значение фона напрямую(в файле splash_screen.xml) мне не удалось, поэтому добавил такой файл, как советовалось в одной из инструкций в Сети.

Далее, в папку drawable добавляем файл ic_launcher.png, представляющий собой изображение на стартовом экране.

Затем идем в папку

и редактируем файл styles.xml так, чтобы он выглядел следующим образом

Этим действием мы добавляем новую «тему оформления» для «активности»(activity).

«Активность»(Activity) в Android-приложениях представляет собой «экран» или «страницу». По умолчанию в React Native есть лишь одна «активность», мы же добавляем ещё одну.

Для этого переходим в папку с java-кодом:

(путь после /java/ в вашем проекте будет другим) и делаем следующее:

1. переименовываем MainActivity.java в MainActivity2.java
2. редактируем файл MainActivity2.java — меняем название класса в 6 строке с «MainActivity» на «MainActivity2»:

Создаем файл MainActivity.java, в который пишем такой код:

Смысл перечисленных выше 3-х шагов прост: мы меняем стартовый загрузочный экран(«активность») на наш экран(«активность) SplashScreen.

(В этом абзаце вы могли заметить, что LaunchScreen переименовался в SplashScreen. В Android-разработке(и не только) принято называть загрузочный экран SplashScreen’ом.)

Теперь осталось зарегистрировать нашу «активность» в файле-манифесте Android-приложения, чтобы она была доступна для вызова в коде.

Открываем файл AndroidManifest.xml, который находится по адресу

(относительно корневой директории проекта)

И приводим его к такому виду:

В итоге, в файле AndroidManifest.xml мы имеем 2 активности, причем в одной из них указано, что именно она — та, с которой начнется запуск Android-приложения. Это делается добавлением таких параметров:

в тело «активности».

С приготовлениями закончено. Запускаем билд android-версии из корневой папки проекта:

Полный код проекта можно найти здесь.

Источник

Add a splash screen to a React Native app

Aug 26, 2019 · 8 min read

I always struggle to remember the steps required in order to add a splash screen to a React Native app, and some tutorials out there are a bit outdated, so here is my take on the subject.

This tutorial will explain how to create a simple, seamless transition splash screen. No bells and whistles, only a simple logo centered on a plain background.
I used react-native init rn_splashscreen_tutorial to instanciate my project, using React-Native 0.60+.

The final code is available on github.

Note: if you are using Expo or Create React Native App you don’t need to go through all of this, this tutorial is for people that have either ejected their project or created it the good old way, using `react-native init`.

Also note that I ’ m not an iOS nor Android developer, so some steps may surely be improved. I’ll be happy to read how you would do it in the comments!

Splash screen assets

For this tutorial we will use the React logo. We need three sizes, to better match all the devices screen sizes (300px, 600px @x2, 900px @x3).
You can get those images from github.

Install and configure react-native-splash-screen

Step 1: install react-native-splash-screen :

Depending on your package manager of choice.

WARNING: since React Native 0.60 we don’t need to link the libraries anymore, so don’t run react-native link. If you still are on 0.59 or before though, do run it: react-native link react-native-splash-screen

Step 2: update cocoa pods (mandatory for React Native 0.60+ or if you are using pods on your project):

Step 3: update App.js

• Open App.js
• Add import SplashScreen from ‘react-native-splash-screen’ with the other imports
• Also import from react
• Add a useEffect hook in the component that calls SplashScreen.hide()

This step really depends on what you want to do with the status bar.
For the purpose of this tutorial I want to have a dark status bar on Android (I will define it in the Android code) but I want to keep the default behavior for iOS, thus the added condition.

Add a splash screen to an iOS app

First, open the project in Xcode.
Open a command line and from the project root and run
open ios/[project_name].xcworkspace

Note: Starting React Native 0.60, the iOS project uses cocoapods, so you have to open [project_name].xcworkspace and not [project_name].xcodeproj.

Источник

How to add Splash Screen in a React Native Android App? 🌟

The reason why you’re here for this is probably that you couldn’t find the correct, updated, and easiest solution to this till now!

But now, worry no more! You’ve arrived at the right place. I will layout all the steps over here, which I did to implement it within minutes! Let’s get this thing started! 🤘

Step #1

Go to app/src/main/java/[packageName] and create a new file SplashActivity.java and copy-paste the following code inside it.

Exit fullscreen mode

Step #2

Go to app/src/main/AndroidManifest.xml and modify it as follows to use SplashActivity:

Add the following activity inside the tag.

Exit fullscreen mode

Remove the following intent from the MainActivity tag.

Exit fullscreen mode

And add android:exported=»true» inside that activity.

Now, your AndroidManifest.xml should be looking like this:

Exit fullscreen mode

Step #3

Now, we will declare a SplashTheme for SplashActivity . Go to app/src/main/res/values/styles.xml and add the following style inside .

Exit fullscreen mode

Step #4

Go to android\app\src\main\res\values and create a file colors.xml if not present already.
We used a background color constant above, so we must add it to our colors.xml file.

Exit fullscreen mode

Step #5

Go to android/app/src/main/res/drawable (create drawable folder if it doesn’t exist already) and place your splash screen image (its’s name should be splash_screen.png) here and also create a file background_splash.xml with the following code:

Exit fullscreen mode

If the size of your splash screen is equal to the size of the device screen, then remove android:height and android:width from the above-mentioned tag.

Step #6

Install react-native-splash-screen module in your project and then import SplashScreen from it in your App.js file.

Exit fullscreen mode

We need to display the splash screen only till the first component is mounted, and to do that make a useEffect hook inside your App component body (before return) as follows:

Don’t forget to import useEffect from ‘react’ .

Exit fullscreen mode

Step #7

Go to app/src/main/java/[packageName]/MainActivity.java and import the following modules above other imports.

Exit fullscreen mode

Add this method to the top of MainActivity class.

Exit fullscreen mode

Step #8

Go to android/app/src/main/res/values/styles.xml to add SplashStatusBarTheme just like we did in Step #3.

Exit fullscreen mode

If you don’t do this, then StatusBar will change color to black when the JS code of the app will load.

Step #9

Go to android/app/src/main/res/ and create a new folder layout (if it doesn’t already exist). Inside that folder, create a file launch_screen.xml (this file is needed by react-native-splash-screen library ). Inside that file, create a layout using the previously created background as follows:

Exit fullscreen mode

Step #10

Go to android/app/src/main/res/values/colors.xml and add the following tag just like we did in step #4, otherwise, the app will crash. Don’t change the color value.

Exit fullscreen mode

And that’s it! We did it! Your splash screen has been added to your app! Go and check it now! Thank me later! 😉

Hope you learned something new from this! 😃

PS: If you have any confusion or encounter any error while following the above-mentioned steps, then feel free to comment below, I will be happy to help you resolve it. 😊

Источник