Как установить заставку для интерактивного андроида

Ответ 1

Я пробовал три из следующих способов. Первый из них - это то, что я использую в настоящее время для всплывающего экрана андроида для реагирующих проектов.

• Использование пакета npm, написанного другим.

  ссылка: https://github.com/remobile/react-native-splashscreen

• Создайте компонент SplashScreen и перенаправьте его позже.

  ссылка: Как создать экран заставки/Запуск экрана, который исчезает после загрузки приложения? (React Native)

• Нативный код java.

  ссылка: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

У меня есть запрос fetch в componentDidMount() от initialRoute.

Использование первого способа из приведенного выше списка выполняет запрос при показе заставки.

В то время как второй способ должен ждать, пока компонент SplashScreen не будет удален.

Третий способ - это немного больше кодов для записи и поддержки.

Ответ 2

Этот урок здесь отлично работает - я его процитировал и немного изменил, добавил касание react-native-background-color.

https://medium.com/react-native-development/change-splash-screen-in-react-native-android-app-74e6622d699  (который основан на этом https://www.bignerdranch.com/blog/splash-screens-the-right-way/ - так что это родная техника Android)

1. Вам нужно создать заставку в res/drawable. Давайте назовем это splash_screen.xml

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   
       <item
           android:drawable="@android:color/white"/>
   
       <item>
           <bitmap
               android:gravity="center"
               android:src="@mipmap/ic_launcher"/>
       </item>
   
   </layer-list>
   

2. Теперь вам нужно обновить res/values /styles.xml

   <resources>
   
       <!-- Base application theme. -->
       <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
           <!-- Customize your theme here. -->
       </style>
   
   <style name="SplashTheme" parent="AppTheme">
           <item name="android:windowBackground">@drawable/splash_screen</item>
       </style>
   
   </resources>
   

3. Теперь откройте AndroidManifest.xml и замените AppTheme на SplashTheme в MainActivity

   <activity
           android:name=".MainActivity"
           android:label="@string/app_name"
           android:theme="@style/SplashTheme"
       android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
   </activity>
   

   Мы используем SplashTheme вместо обновления AppTheme, чтобы добавить этот фон только для начала деятельности и оставить другие элементы без изменений.

4. После того, как вы попробуете вышеизложенное, вы заметите, что заставка всегда будет оставаться под вашими представлениями js. У вас есть два варианта скрытия заставки:

   • Для установки цвета фона, который удалит изображение, воспользуйтесь модулем Reaction-native-background-color из https://github.com/ramilushev/react-native-background-color. (Это рекомендуемый способ, потому что когда клавиатура отображается в некоторых случаях, она делает корневой вид видимым на долю секунды.)
   • Или установите сплошной (непрозрачный) цвет фона в корневом представлении.

Обратите внимание на то, что означает "корневой вид". Это самый первый <View>, который вы визуализируете в своем приложении, которым вы управляете (это означает, что вы можете его стилизовать).

Пользовательский цвет

Если вы хотите использовать собственный цвет, отличный от @android:color/***, то вам нужно создать colors.xml в android\app\src\main\res\values\colors.xml и определить цвета, подобные этому:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="foobar">#ca949b</color>
</resources>

Вы можете использовать любое имя и любой цветовой код.

Затем в splash_screen.xml мы обновляем <item android:drawable="@android:color/white" /> на <item android:drawable="@color/foobar" />

Дополнительная информация по удалению фоновой заставки сзади

После того, как вы создали всплеск, как это. Вы заметите, что изображение остается на заднем плане навсегда. Чтобы удалить это изображение, используйте этот модуль - https://github.com/ramilushev/react-native-background-color - и вызовите BackgroundColor.setColor('#XXXXXX') любого цвета. Это удалит изображение.

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

Ответ 3

Вы пытались использовать это? Я сталкивался с этим несколько дней назад. Работает нормально на iOS, но я еще не тестировал на Android. У вас должен быть узел> = 6 и установлен imageMagic. (для Mac: brew install imagemagic)

npm install -g yo generator-rn-toolbox
yo rn-toolbox:assets --splash IMGAE --android

Ответ 4

Это сработало для меня Как добавить всплывающий экран в приложение React Native (iOS и Android)

Это довольно прямолинейно

Ответ 5

Все, что вам нужно сделать, это вызвать функцию на заставке.

componentWillMount() {
    setTimeout(() => {
        this.props.navigation.navigate('Login')
    }, 1000);
}