如何创建某种启动屏幕/启动屏幕，在应用加载后消失？（反应原生）答案

【问题标题】：How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)如何创建某种启动屏幕/启动屏幕，在应用加载后消失？（反应原生）
【发布时间】：2015-10-28 11:36:31
【问题描述】：

我想知道如何解决启动屏幕，假设它出现了几秒钟然后被另一个视图替换？

我想在第一次启动应用程序时使用它并覆盖一些网络。

【问题讨论】：

标签： android ios react-native

【解决方案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 东西之后。

【讨论】：

我认为最好的解决方案，只是提到 react-native 的主要组件必须有一个 backgroundColor，因为 react 应用程序位于启动画面之上。
@Andrey 为什么你不必做他们在第 1 步链接的文章中所做的SplashActivity 课程？

【解决方案3】：

我设法做到了这种方式，看起来最简单并且需要的资源更少：

为不同的分辨率创建初始图像。我使用ionic resources 从 PSD 文件生成所有尺寸。您需要使用ionic start 创建一个临时离子项目，编辑/resources 中的PSD 文件，然后运行ionic resources。
将它们放在 app/src/main/res/mipmap-xxx 的相应文件夹中，名称为 ic_splash.png
使用以下内容创建 app/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> 之前添加<item android:drawable="@android:color/black"/>。除非您的初始图像具有透明度，否则颜色并不重要。
添加到 app/src/main/res/values/styles.xml： <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowBackground">@drawable/splash</item> </style>
编辑 app/src/main/AndroidManifest.xml 并包含在应用程序中>activity android:theme="@style/SplashTheme"
现在应用程序将以初始屏幕作为背景启动，并且一旦 React Native 应用程序加载，它将被放置在其顶部。 React Native 主组件应该有一些背景，以便覆盖初始图像。

【讨论】：

工作，但需要在 splash.xml 中添加颜色。例如：<item android:drawable="@android:color/black"/>

【解决方案4】：

这是解决方案，您可以使用屏幕导航自定义带有视图动画的闪屏

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>
        );
    } }

【讨论】：

是的，这很酷，但最好实现原生启动画面，就像您和我的解决方案一样，当应用程序启动时，甚至在“SplashPage”安装之前，仍然会出现白屏。 => github.com/crazycodeboy/react-native-splash-screen
我可以使用原生闪屏执行动画和 gif 等操作吗？在启动画面加载之前我得到了白屏
是的，我很确定你可以做到这一点。你到底需要什么？你想要一个带有 react-native-splash-screen 的动画/GIF？
是的，我想要在多个图像上显示动画的启动画面。如何使用 react-native-splash-screen 执行？

【解决方案5】：

This 是正确的方式。

利用windowBackground 属性应该避免使用旧样式时可能产生的所有 UI 工件（启动运行一段确定时间的活动）

【讨论】：

你将如何应用它来响应原生？
这不是 react native 的解决方案