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

Ответ 1

Вот как я решил экран загрузки. Я работал с Компонентом Навигатора.

В моем index.android.js я установил initialRoute для моего класса SplashPage/SplashScreen, а затем там я установил таймаут, который ссылается на MainView, к которому вы хотите перейти через определенное время.

Мой навигатор в index.android.js:

<Navigator
   initialRoute={{id: 'SplashPage'}}
   renderScene={this.renderScene}
   configureScene={(route) => {
       if (route.sceneConfig) {
           return route.sceneConfig;
       }
       return Navigator.SceneConfigs.HorizontalSwipeJump;
   }}
/>

Мой начальный класс:

class SplashPage extends Component {

    componentWillMount () {
        var navigator = this.props.navigator;
        setTimeout (() => {
            navigator.replace({
                id: 'MainView', <-- This is the View you go to
            });
        }, 2000); <-- Time until it jumps to "MainView" 
    }
    render () {
        return (
            <View style={{flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}>
                <Image style={{position: 'absolute', left: 0, top: 0, width: windowSize.width, height: windowSize.height}} source={require('image!splash_screen')}></Image>
            </View>
        );
    }
}

module.exports = SplashPage;

РЕДАКТИРОВАТЬ

Может быть интереснее, потому что он "родной";) https://github.com/crazycodeboy/react-native-splash-screen

Ответ 2

Исправлена ​​ошибка. Итак, что нужно сделать.

1) Сделайте все из this, но не создавайте SplashActivity.

2) Все, что вам нужно сделать сейчас, это установить тему MainActivity в SplashTheme.

В том случае, когда MainActivity загружает его, показывая его тему, но после того, как он заменит React-Native.

Ответ 3

Мне удалось сделать это таким образом, который выглядит как самый простой и требует меньше ресурсов:

• Создайте всплывающие изображения для разных разрешений. Я использовал ионные ресурсы, чтобы генерировать все размеры из файла PSD. Вам необходимо создать временный ионный проект с ionic start, отредактировать файлы PSD внутри/ресурсы и запустить ionic resources.

• Поместите их в соответствующую папку в app/src/main/res/mipmap-xxx, с именем ic_splash.png

• Создайте приложение /src/main/res/drawable/splash.xml с этим контентом: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:gravity="center" android:src="@mipmap/ic_splash"/> </item> </layer-list> Примечание. Похоже, некоторые люди должны добавить цвет под элементом растрового изображения, поэтому просто добавьте <item android:drawable="@android:color/black"/> до выше <item>. Цвет действительно не имеет значения, если ваше изображение с заставкой не имеет прозрачности.

• Добавить в приложение /src/main/res/values ​​/styles.xml: <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowBackground">@drawable/splash</item> </style>
• Изменить приложение /src/main/AndroidManifest.xml и включить внутри приложения > activity android:theme="@style/SplashTheme"
• Теперь приложение начнет с заставки в качестве фона, и как только приложение React Native загрузится, оно будет помещено поверх него. Основной компонент React Native должен иметь некоторый фон, чтобы покрыть всплеск.

Ответ 4

Это является правильным способом.

Использование атрибута windowBackground должно избегать всех артефактов пользовательского интерфейса, которые вы могли бы сделать, если бы вы использовали старый стиль (запуск активности, которая выполняется в течение определенного времени)

Ответ 5

вот решение, вы можете настроить заставку с анимацией просмотра, используя экранную навигацию

import React, { Component } from 'react';  import { View, Text, Animated,  
   Easing} from 'react-native';
export default class SplashPage extends Component {
    constructor() {
        super();
        this.RotateValueHolder = new Animated.Value(0);
        setTimeout(() => {
            this.props.navigation.replace('login')
        }, 5000);
    }
    componentDidMount() {
        this.StartImageRotate();
    }
    StartImageRotate() {
        this.RotateValueHolder.setValue(0);
        Animated.timing(this.RotateValueHolder, {
            toValue: 1,
            duration: 3000,
            easing: Easing.linear,
        }).start(() => this.StartImageRotate());
    }

    render() {
        const RotateImage = this.RotateValueHolder.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg'],
        });
        return (
            <View style={{
                flex: 1, backgroundColor: 'gray', alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Animated.Image
                    style={{
                        width: 250,
                        height: 250,
                        transform: [{ rotate: RotateImage }],
                    }}
                    source={{ uri:'someurl.png' }}
                />
            </View>
        );
    } }