如何创建某种启动画面/启动画面，在App加载后消失？ （React Native） [英] How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)

问题描述

我想知道如何解决一个启动画面，让我们说它出现了几秒钟，然后被其他视图取代？

I was wondering how to solve a launching screen which, let´s say it appears for some seconds and then gets replaced by the other View?

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

I would like to use this when the app is started the first time and to cover some networkings.

推荐答案

这就是我解决了加载屏幕。我使用Navigator Component。

This is how I solved the Loading Screen. I worked with Navigator Component.

在我的 index.android.js 中设置 initialRoute 到我的 SplashPage / SplashScreen 类，然后在那里我设置了一个超时链接到一段时间后你要跳转到的 MainView 。

In my index.android.js I set the initialRoute to my SplashPage/SplashScreen class and then in there I set a timeout which links to the MainView you want to jump to after a certain time.

我在index.android.js中的导航器：

<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

Might be more interesting because it is "native" ;) https://github.com/crazycodeboy/react-native-splash-screen

这篇关于如何创建某种启动画面/启动画面，在App加载后消失？ （React Native）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！