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

Как установить заставку для интерактивного андроида, я ничего не могу найти по этой теме, и я подумал, что это странно.

Спасибо

ОТВЕТЫ

Ответ 1

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

У меня есть запрос 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

Ответ 5

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

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