如何创建某种启动画面/启动画面,在App加载后消失? (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