Всем привет!
Причина, по которой вы здесь для этого, вероятно, в том, что до сих пор вы не могли найти правильное, обновленное и простое решение этой проблемы!
Но теперь больше не беспокойтесь! Вы прибыли в нужное место. Я опишу здесь все шаги, которые я сделал, чтобы реализовать это в течение нескольких минут! Давайте начнем это дело! 🤘
Перейдите в приложение/src/main/java/[имя пакета] и создайте новый файл SplashActivity.java и скопируйте и вставьте в него следующий код.
package com.packagename; // Replace this with your package name
import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}
Перейти к app/src/main/AndroidManifest.xml и измените его следующим образом, чтобы использовать SplashActivity:
Добавьте следующее действие внутри тега <приложение> .
Удалите следующее намерение из тега Основное действие .
И добавьте android:exported="истина" внутри этого действия.
Теперь ваш AndroidManifest.xml должно выглядеть вот так:
Теперь мы объявим Тема заставки для Всплеск активности . Перейти к app/src/main/res/values/styles.xml и добавьте следующий стиль внутри <ресурсы> .
Перейдите в раздел android\app\src\main\res\значения и создайте файл colors.xml если его еще нет. Выше мы использовали константу цвета фона, поэтому мы должны добавить ее в ваш colors.xml файл.
#fff
Перейдите в android/app/src/main/res/drawable (создайте папку для рисования, если она еще не существует) и поместите изображение заставки (его имя должно быть splash_screen.png) здесь, а также создайте файл background_splash.xml со следующим кодом:
Если размер вашей заставки равен размеру экрана устройства, удалите android:высота и android:ширина из вышеупомянутого тега <элемент> .
Установите модуль react-native-splash-screen в свой проект, а затем импортируйте заставку из него в свой App.js файл.
import SplashScreen from 'react-native-splash-screen';
Нам нужно отображать заставку только до тех пор, пока не будет смонтирован первый компонент, и для этого сделайте использовать эффект крючок внутри тела компонента вашего приложения (перед возвратом) следующим образом:
Не забудьте импортировать используйте эффект от "реагировать" .
useEffect(() => {
SplashScreen.hide();
}, []);
Перейдите в приложение/src/главная/java/[Имя пакета]/MainActivity.java и импортируйте следующие модули поверх других импортируемых.
import org.devio.rn.splashscreen.SplashScreen; import android.os.Bundle;
Добавьте этот метод в начало класса MainActivity .
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, R.style.SplashStatusBarTheme);
super.onCreate(savedInstanceState);
}
Перейти к android/app/src/main/res/values/styles.xml чтобы добавить Всплывающую тему строки состояния точно так же, как мы делали на шаге № 3.
Если вы этого не сделаете, то строка состояния изменит цвет на черный при загрузке JS-кода приложения.
Перейдите в android/app/src/main/res/ и создайте новую папку макет (если он еще не существует). Внутри этой папки создайте файл launch_screen.xml (этот файл необходим для библиотеки заставок react-native ). Внутри этого файла создайте макет, используя ранее созданный фон, следующим образом:
Перейдите в android/app/src/main/res/значения/colors.xml и добавьте следующий тег, как мы делали на шаге № 4, в противном случае приложение выйдет из строя. Не меняйте значение цвета.
#000
И это все! Мы сделали это! Ваша заставка добавлена в ваше приложение! Иди и проверь это сейчас же! Поблагодарите меня позже! 😉
Надеюсь, вы узнали из этого что-то новое! 😃
PS: Если у вас возникнет какая-либо путаница или вы столкнетесь с какой-либо ошибкой при выполнении вышеуказанных шагов, то не стесняйтесь комментировать ниже, я буду рад помочь вам ее устранить. 😊
Хорошего дня! 🤗
Оригинал: “https://dev.to/cmcodes/how-to-add-splash-screen-in-a-react-native-android-app-287l”