如何创build某种Splash屏幕/启动屏幕，在App加载后消失？ （React Native）

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

我想在第一次启动应用程序时使用它，并覆盖一些联网。

Answer 1

这是我如何解决载入屏幕 。 我曾与导航组件。

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

Answer 2

解决了这个问题。 那么需要做些什么呢？

1）从此做所有，但不要创buildSplashActivity。

2）你现在需要做的是把你的MainActivity主题设置为SplashTheme。

在这种情况下，当MainActivity加载它显示它的主题，但它后，它取代了React-Native的东西。

Answer 3

我设法这样做，看起来像最简单，需要更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主要组件应该有一些背景，以便覆盖飞溅图像。

Answer 4

这是正确的方法。

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