Question

我想知道如何解决一个启动画面，让我们说它出现了几秒钟，然后被另一个View取代？

我想在第一次启动应用时使用此功能并覆盖一些网络。

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;

修改

可能会更有趣，因为它是＆＃34;本地＆＃34; ;） https://github.com/crazycodeboy/react-native-splash-screen

Answer 2

修正了这个问题。那么需要做些什么。

1）从this创建所有内容但不创建SplashActivity。

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

当MainActivity加载它显示它的主题，但在它被React-Native东西替换之后。

Answer 3

我设法这样做，看起来最简单，需要的资源更少：

为不同的分辨率创建启动图像。我使用ionic resources从PSD文件生成所有大小。您需要使用ionic start创建临时离子项目，编辑/ resources内的PSD文件，然后运行ionic resources。
将它们放在app / src / main / res / mipmap-xxx中的相应文件夹中，名称为ic_splash.png
使用以下内容创建app / 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 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并包含内部应用程序＆gt;活动android:theme="@style/SplashTheme"
现在，应用程序将以启动画面作为背景开始，一旦React Native应用程序加载，它将被放置在它之上。 React Native主要组件应具有一些背景，以便覆盖启动图像。

Answer 4

This是正确的方法。

利用windowBackground属性应该避免在使用旧样式时启动的所有UI工件（启动运行一段时间的活动）

Answer 5

这是解决方案，您可以使用屏幕导航自定义带有视图动画的启动屏幕

import React, { Component } from 'react';  import { View, Text, Animated,  
   Easing} from 'react-native';
export default class SplashPage extends Component {
    constructor() {
        super();
        this.RotateValueHolder = new Animated.Value(0);
        setTimeout(() => {
            this.props.navigation.replace('login')
        }, 5000);
    }
    componentDidMount() {
        this.StartImageRotate();
    }
    StartImageRotate() {
        this.RotateValueHolder.setValue(0);
        Animated.timing(this.RotateValueHolder, {
            toValue: 1,
            duration: 3000,
            easing: Easing.linear,
        }).start(() => this.StartImageRotate());
    }

    render() {
        const RotateImage = this.RotateValueHolder.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg'],
        });
        return (
            <View style={{
                flex: 1, backgroundColor: 'gray', alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Animated.Image
                    style={{
                        width: 250,
                        height: 250,
                        transform: [{ rotate: RotateImage }],
                    }}
                    source={{ uri:'someurl.png' }}
                />
            </View>
        );
    } }

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

5 个答案:

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

5 个答案:

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