React|React Native学习之启动页(四) ReactNative学习之启动页(四)

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 () } } 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`: 居中不拉伸。

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