如何创建一种启动屏幕/加载屏幕，在应用程序加载后消失？（React Native）

Question

我在想如何解决一个启动屏幕的问题，比如它出现了几秒钟，然后被其他视图所替换？

当应用程序第一次启动并需要进行一些网络操作时，我想使用它。

- BigPun86

Answer 1

这是我解决加载屏幕问题的方式。我使用了Navigator Component。

在我的index.android.js文件中，我将initialRoute设置为我的SplashPage/SplashScreen类，然后在那里设置了一个超时链接到您想要跳转到的MainView。

我的index.android.js文件中的Navigator：

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

我的 initialRoute 类：

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

- BigPun86

---

视图完全加载后才能更改图像，不是在硬编码时间之后更改。 - IntoTheDeep

这并不能解决问题。 - JayGarcia

Answer 2

已经解决了这个问题。

需要做的是：

1） 按照这里的方法进行设置，但不要创建SplashActivity。

2） 现在需要做的就是将MainActivity主题设置为SplashTheme。

问题在于，当MainActivity加载时，它会显示其主题，但在加载React-Native内容后，其主题将被替换。

- Andrey Nikishaev

---

在我看来，最好的解决方案就是要求react-native主组件具有背景颜色，因为React应用程序位于闪屏屏幕之上。 - blumanski

@Andrey，为什么你不需要做步骤1中链接文章中提到的SplashActivity类的内容？ - Noitidart

Answer 3

我用以下方式成功实现，看起来最简单且需要更少的资源：

1. 创建不同分辨率的闪屏图片。我使用 ionic resources 从 PSD 文件生成了所有尺寸。您需要创建一个临时的 Ionic 项目，使用 ionic start 命令，编辑 /resources 中的 PSD 文件，然后运行 ionic resources。

2. 将它们放在 app/src/main/res/mipmap-xxx 目录下的适当文件夹中，命名为 ic_splash.png。

3. 创建 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"/> 即可。除非您的闪屏图片具有透明度，否则颜色并不重要。

4. 在 app/src/main/res/values/styles.xml 中添加： <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowBackground">@drawable/splash</item> </style>
5. 编辑 app/src/main/AndroidManifest.xml，并在 application>activity 中包含 android:theme="@style/SplashTheme"。
6. 现在，应用程序将以闪屏界面作为背景启动，一旦 React Native 应用程序加载完成，它就会被放置在其上方。React Native 主组件应该有一些背景，以覆盖闪屏图片。

- Jesús Carrera

---

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

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

- civani mahida

---

是的，那很酷，但最好还是本地实现启动画面，因为使用你和我提供的解决方案时，在应用程序启动并且“SplashPage”甚至未挂载之前仍会出现白屏。=> https://github.com/crazycodeboy/react-native-splash-screen - BigPun86

我能否在本机启动画面中执行动画和 GIF 等操作？我在启动画面加载之前得到了白屏。 - civani mahida

是的，我非常确定你可以做到这一点。你需要什么？你想要在 react-native-splash-screen 中添加一个动画/GIF吗？ - BigPun86

是的，我想在多张图片上使用动画来创建启动屏幕。我该如何使用react-native-splash-screen实现？ - civani mahida

Answer 5

这是正确的方法。

利用windowBackground属性应该可以避免您使用旧样式（启动运行一定时间的活动）时可能出现的所有UI工件。

- Simone Leoni

---

你如何将这个应用到React Native？ - Tiagojdferreira

这不是 React Native 的解决方案。 - Gerrit Begher