3.2.1 搭建程序启动页

创建 /src/pages/SplashPage.js ，参考代码片段3-2-1

import React, {Component} from 'react';
import {
    Image,
} from 'react-native';
import theme from '../config/theme';

export default class SplashPage extends Component {

    componentDidMount() {
        // 定时任务
        this.timer = setTimeout(() => {
            //TODO 跳转到下个页面 

            // 移除定时任务
            this.timer && clearTimeout(this.timer);
        }, 2000);
    }

    render() {
        return (
            <Image style={{width: theme.screenWidth, height: theme.screenHeight}}
                   source={require('../images/launch.png')}
                   resizeMode="cover"/>

        );
    }
}

代码片段3-2-1

Splash 页面使用 Image 组件，这个组件专门用来显示图片，文档地址：http://facebook.github.io/react-native/docs/images.html

Image source 属性通过 require 引入本地一张图片，我们在当前代码目录下放置该图片

src
 |-- images
    |[email protected]
    |[email protected]
 |-- pages
    |--  SplashPage.js

RN 图片像 iOS 原生开发一样，使用@2x和@3x后缀为不同的屏幕密度提供图像。[email protected] 将在iPhone 6/7/8 上使用，而 [email protected] 在iPhone 6/7/8 Plus或 Nexus 5 等大部分 Android 手机上使用，其中 2x 图对应 Android 原生开发的 xhdpi，3x 对应 xxhdpi 。如果没有与屏幕密度相匹配的图像，则会选择最接近的最佳选项。

Image 组件的宽高为手机屏幕宽高，因为手机屏幕宽高经常用到，所以抽取出来定义在了 theme 中，这一点参考了 Android 原生开发。代码如下：

// /src/config/theme.js

import {Dimensions} from 'react-native';

export default module = {
    screenWidth: Dimensions.get('window').width,
    screenHeight: Dimensions.get('window').height,
};

Image resizeMode 确定视图宽高与原始图像尺寸不匹配时如何调整图像尺寸。

* cover：均匀缩放图像（保持图像的宽高比），使图像的两个尺寸（宽度和高度）等于或大于视图的相应尺寸。
* contain：均匀缩放图像（保持图像的宽高比），使图像的两个尺寸（宽度和高度）等于或小于视图的相应尺寸。
* stretch：独立缩放宽度和高度，这可能会改变图片的宽高比。
* repeat：重复图像以覆盖视图。图像将保持其尺寸和高宽比。（仅适用于iOS）
* center：沿着两个维度在视图中居中图像。如果图像大于视图，则将其均匀缩小以使其包含在视图中。

为了方便演示页面跳转，创建 IndexPage ，代码如下：

// /src/pages/IndexPage.js

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet
} from 'react-native';

type Props = {};
export default class IndexPage extends Component<Props> {

    render() {
        return ( // 渲染布局
            <View style={styles.container}>
                <Text style={{margin:10,fontSize:20,color:'black'}}>首页</Text>
            </View>
        );
    }
}
// 样式文件
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});