如何创build某种Splash屏幕/启动屏幕,在App加载后消失? (React Native)
我想知道如何解决启动屏幕,让我们说,它出现了几秒钟,然后被其他视图取代?
我想在第一次启动应用程序时使用它,并覆盖一些联网。
这是我如何解决载入屏幕 。 我曾与导航组件。
在我的index.android.js
我将index.android.js
设置为我的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
解决了这个问题。 那么需要做些什么呢?
1)从此做所有,但不要创buildSplashActivity。
2)你现在需要做的是把你的MainActivity主题设置为SplashTheme。
在这种情况下,当MainActivity加载它显示它的主题,但它后,它取代了React-Native的东西。
我设法这样做,看起来像最简单,需要更less的资源:
-
创build不同分辨率的闪屏图像。 我用离子资源从PSD文件生成所有大小。 您需要创build一个
ionic start
的临时离子项目,编辑内部/资源的PSD文件,并运行ionic resources
。 -
将它们放在app / src / main / res / mipmap-xxx中的相应文件夹中,名称为ic_splash.png
-
使用以下内容创buildapp / 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"/>
<item>
。 除非您的飞溅图像具有透明度,否则颜色并不重要。 - 添加到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主要组件应该有一些背景,以便覆盖飞溅图像。
这是正确的方法。
利用windowBackground
属性应该避免在使用旧样式时可能产生的所有UI构件(启动运行一段确定的时间的活动)