如何创建某种Splash屏幕/启动屏幕,在App加载后消失？(React Native)

Question

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

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

Answer 1

这就是我解决加载屏幕的方法.我使用Navigator Component.

在我的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;
   }}
/>

我的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

Answer 2

解决了这个问题.那么需要做些什么.

1)使所有从本但不创建SplashActivity.

2)您现在需要做的就是将MainActivity主题设置为SplashTheme.

事实上,当MainActivity加载它显示它的主题,但它被替换为React-Native的东西.