3.2.2 使用 createStackNavigator

我们需要通过 createStackNavigator 渲染启动页，并提供方法跳转到下一界面。

修改 App.js，如下：

import React from 'react';
//导入 react-navigation 组件
import {
    createStackNavigator,
} from 'react-navigation';
//页面切换动画插入器
import CardStackStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator';

import SplashPage from './src/pages/SplashPage';
import IndexPage from './src/pages/IndexPage';


const App = createStackNavigator({
    SplashPage: {
        screen: SplashPage,
        navigationOptions: {
            gesturesEnabled: true,
            headerTitle: null //去掉 react-navigation 提供的顶部标题
        }
    },
    IndexPage: {
        screen: IndexPage,
        navigationOptions: {
            gesturesEnabled: true,
            headerTitle: null
        }
    }
}, {
    mode: 'card',// 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
    headerMode: 'none',//// 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
    transitionConfig: () => ({ //切换动画
        screenInterpolator: CardStackStyleInterpolator.forHorizontal //水平动画
    })
});

export default App

代码片段3-2-2

createStackNavigator 返回一个 RN 组件，可以直接从 App.js 导出，作为程序的根组件。createStackNavigator 函数接受一个路由配置，以及一个可选的选项配置。

路由配置中，定义了 SplashPage 和 IndexPage 两个 key 值，分别对应视图 SplashPage 和 IndexPage。程序默认先渲染第一个，这里就是 SplashPage。页面通过 navigationOptions 去掉了 react-navigation 提供的顶部标题开启了左滑返回的手势； 当然 navigationOptions 也可以在下面的可选配置中统一定义。

createStackNavigator 第二参数是可选配置，代码如下。

{
    mode: 'card',// 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
    headerMode: 'none',//// 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
    transitionConfig: () => ({ //切换动画
        screenInterpolator: CardStackStyleInterpolator.forHorizontal //水平动画
    })
}

可选配置主要定义了界面切换的动画，使用了 react-navigation 提供的动画插入器组件 CardStackStyleInterpolator，我们使用了交互不错的水平动画 。

当 SplashPage 添加到路由配置中，本身就多了 navigation 这个属性，通过该属性提供的方法可以进行界面跳转。修改 SplashPage.js 代码，如下：

export default class SplashPage extends Component {

    componentDidMount() {
        // 定时任务
        this.timer = setTimeout(() => {
            // 跳转到下一个页面
            this.props.navigation.navigate('IndexPage');
            // 移除定时任务
            this.timer && clearTimeout(this.timer);
        }, 2000);
    }
}

通过 this.props.navigation.navigate('IndexPage'); 跳转到下一个页面。 调试的时候在有些 Android 模拟器定时任务可能需要多等一段时间，需要升级下 gradle 版本

navigate 是转到新的页面，在新的页面可以通过 this.props.navigation.goBack() 返回。而启动页面一般只是显示一次而并不需要返回，用 replace 函数替代 navigate 函数即可。

查看代码

如果你已经从 GitHub 上克隆了这个程序的 Git 仓库，那么可以执行 git checkout 3a签出程序的这个版本，运行前需要执行 npm install 或 yarn install 安装依赖。