react-native 实际项目解析-路由控制

路由控制

路由部分我放在app.js配置。react-navigation涉及到三个部分。StackNavigator,TabNavigator,DrawerNavigator。

具体用法可以自行查文档,这里只说一些遇到的问题。

项目中,我只用到了StackNavigator。也就是这个app中没有底部导航,也没有侧边抽屉导航。这个StackNavigator也是最容易理解原理的一部分。

import React, {Component} from 'react';
import {
    StackNavigator,
} from 'react-navigation';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'

//登录页面
import Login from './src/pages/Login';
//获取验证码
import GetCode from './src/pages/GetCode';
//修改密码
import ResetPwd from './src/pages/ResetPwd';
//日程列表
import Schedule from './src/pages/Schedule';

/*
 * 配置堆栈导航
 */
const Stack = StackNavigator({
    Schedule: {
        screen: Schedule,
    },
    Login: {
        screen: Login,
    },
    GetCode: {
        screen: GetCode,
    },
    ResetPwd: {
        screen: ResetPwd,
    },
}, {
    mode: 'card',
    headerMode: 'screen',
    cardStyle: CardStackStyleInterpolator.forHorizontal,
    transitionConfig: (() => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    })),
});


/**
 * 配置侧滑菜单
 */
export default StackNav = Stack

首相,引入StackNavigator这个模块,然后引入页面,然后进行配置。配置部分,只需要将不同页面连接上就可以了。后面是对整个导航的配置。

我这里修改了一下页面切换方式。默认的是从下向上切换,但是我其实是想要最原始的效果,也就是左右切换。不同版本,这个CardStackStyleInterpolator.forHorizontal的位置还是 不一样的,让我找了半天。

这里需要注意的地方是,我开始用的最新版的导航,但是不是很稳定,所以退回来找了一个之前的版本,

最后别忘了把这个组件export出去。

随机浏览