如何创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的资源:

  1. 创build不同分辨率的闪屏图像。 我用离子资源从PSD文件生成所有大小。 您需要创build一个ionic start的临时离子项目,编辑内部/资源的PSD文件,并运行ionic resources

  2. 将它们放在app / src / main / res / mipmap-xxx中的相应文件夹中,名称为ic_splash.png

  3. 使用以下内容创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> 。 除非您的飞溅图像具有透明度,否则颜色并不重要。

  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并包含在应用程序> activity android:theme="@style/SplashTheme"
  6. 现在,应用程序将以启动屏幕作为背景开始,只要加载了React Native应用程序,它就会置于其上。 React Native主要组件应该有一些背景,以便覆盖飞溅图像。

这是正确的方法。

利用windowBackground属性应该避免在使用旧样式时可能产生的所有UI构件(启动运行一段确定的时间的活动)