React Native学习之启动页(四)

1、启动页是用户看到的一个应用的第一个页面，通过启动页，也可以解决React Native打开白屏的问题；
2、紧接上一篇，在initialRoute里面我们传入的组件叫Splash，那么接下来就可以自定义Splash组件：

import React, {Component} from "react";
import {
    AppRegistry,
    StyleSheet,
    View,
    Image,
    Animated,
    Dimensions
} from 'react-native';
import {notifyMessage} from "../utils/Util";
import storage from "../js/storage";
import Main from "./Main";
import GuideComponent from "./GuideComponent";

const {width, height} = Dimensions.get('window');
export default class SplashComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(0),          // 透明度初始值设为0
        };
    }

    componentDidMount() {
        Animated.timing(                            // 随时间变化而执行的动画类型
            this.state.fadeAnim,                      // 动画中的变量值
            {
                toValue: 1,                             // 透明度最终变为1，即完全不透明
                duration: 2000
            }
        ).start();                                  // 开始执行动画
        this.timer = setTimeout(() => {
            storage.load({
                key: 'user',
                autoSync: true,
                syncInBackground: true,
            }).then(ret => {
                const isFirst = ret.isFirst;
                if (isFirst !== "1") {
                    storage.save({
                        key: 'user',
                        rawData: {
                            isFirst: "1",
                        },
                        // 设为null,则不过期,这里会覆盖初始化的时效
                        expires: null
                    });
                    this.props.nav.resetTo({
                        component: GuideComponent,
                    });
                } else {
                    this.props.nav.resetTo({
                        component: Main,
                    });
                }
            }).catch((error) => {
                switch (error.name) {
                    case 'NotFoundError':
                        storage.save({
                            key: 'user',
                            rawData: {
                                isFirst: "1",
                            },
                            // 设为null,则不过期,这里会覆盖初始化的时效
                            expires: null
                        });
                        this.props.nav.resetTo({
                            component: GuideComponent,
                        });
                        break;
                    case 'ExpiredError':
                        break;
                }
            });
        }, 2500);
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }

    render() {
        return (
            <Animated.Image
                style={{
                    width: '100%',
                    height: '100%',
                    resizeMode: Image.resizeMode.stretch,
                    opacity: this.state.fadeAnim
                }}
                source={require('../images/splash.png')}
            />

        )
    }
}
AppRegistry.registerComponent('splash', () => SplashComponent);

3、几个注意点：
1）首先我使用的是一张图片作为启动页面显示，而且添加了一个动画，图片慢慢显示出来，动画执行时间是2秒，并且同时开启了一个定时器，定时器时间是2.5秒，通过缓存的isFirst来判断是跳转首页还是引导页；
2）图片全屏显示的问题，如果我们不设置resizeMode，那么默认是cover，就是超出部分会截断，我这里用的图片尺寸是720*1280，使用stetch来拉伸；

#### resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center') [](https://reactnative.cn/docs/0.44/image.html#resizemode)

决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

*   `cover`: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。**译注**：这样图片完全覆盖甚至超出容器，容器中不留任何空白。

*   `contain`: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。**译注**：这样图片完全被包裹在容器中，容器中可能留有空白

*   `stretch`: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。

*   `repeat`: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。

*   `center`: 居中不拉伸。

3、就是导航器Navigator的栈问题，启动页显示完以后，我们是不希望用户还能返回看到这个页面，因此需要使用navigator.resetTo方法;

image.png