React Native Navigator 的路由以及页面跳转

原创 2017年01月03日 17:21:18

移动端有个常用的UI控件导航控制器,在RN里面就是Navigator控件。今天在说Navigator之前先说个不是很恰当的比喻用来解释Navigator的工作流程:平时在看电视的时候我们都会用遥控器切换电视机播放的频道,在遥控器上面你不仅可以使用上一个、下一个这种按键来切换频道也可以手动输入频道数来跳转到指定的频道,在我看来这个过程就是使用navigator进行页面跳转的过程。至于你跳转到指定频道后电视机播放的内容那是由这个频道接收到的电磁波包含的信息决定的,指定频道接收的电磁波可以类比指定页面绑定的路由,页面将显示什么内容都是根据route这个路由对象包含的内容决定的。接下来看看演示的效果:
navigator

我们先定义一组路由信息:
    const routes = [
        {message:'第一页',index:0,component:FirstPage},
        {message:'第二页',index:1,component:SecondPage},
        {message:'第三页',index:2,component:ThirdPage}
    ];
  routes里面的每个元素就是一个路由,这个路由里面包含了页面显示所需要的信息,message我们规定它代表了页面的标题,index我们将所有的页面编号用于识别,component我们规定它表示了这个页面将要展示的具体内容。注意,路由里面包含的信息都是可以自己定义的。
Navigator里面有一些常用的属性:
initialRoute 这个属性可以用来指定初始化页面,你可以传入一个路由用来初始化。
initialRouteStack 这个属性可以传入一个路由数组来表示将要显示的一系列页面,设置了这个后Navigator会将这些路由都一次性的压入堆栈。

renderScene当前渲染的页面,它的参数是一个函数,简单看下官方的说明

在renderScene这个属性里面我们可以很方便的获取到两个主要的值:
route和navigator,这样我们就可以显示我们想要的任何内容了也可以跳转的其他页面离开当前页面了
  /**
     * Required function which renders the scene for a given route. Will be
     * invoked with the `route` and the `navigator` object.
     *
     * ```
     * (route, navigator) =>
     *   <MySceneComponent title={route.title} navigator={navigator} />
     * ```
     */
    renderScene: PropTypes.func.isRequired,

style 是navigator的样式
configureScene这个属性是用来配置页面跳转动画和手势的,常用的动画手势如下
- Navigator.SceneConfigs.PushFromRight (default)
- Navigator.SceneConfigs.FloatFromRight
- Navigator.SceneConfigs.FloatFromLeft
- Navigator.SceneConfigs.FloatFromBottom
- Navigator.SceneConfigs.FloatFromBottomAndroid
- Navigator.SceneConfigs.FadeAndroid
- Navigator.SceneConfigs.HorizontalSwipeJump
- Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
- Navigator.SceneConfigs.VerticalUpSwipeJump
- Navigator.SceneConfigs.VerticalDownSwipeJump

navigationBar 这个属性是用来设置导航栏的,我们可以设置导航栏的左右按钮和标题,接下来我们看看部分代码:

return(
            <Navigator
                initialRoute={routes[0]}
                initialRouteStack = {routes}
                renderScene={(route,navigator) =>
                    <route.component route={route} navigator={navigator} routes={routes}/>
                }
                style={styles.navigator}
                configureScene = {(route) => {
                    if (route.index === 0) {
                        return Navigator.SceneConfigs.HorizontalSwipeJump
                    }
                    if (route.index === 1) {
                        return Navigator.SceneConfigs.PushFromRight
                    }
                    if (route.index === 2) {
                        return Navigator.SceneConfigs.FloatFromBottom
                    }
                }}
                navigationBar={
                       <Navigator.NavigationBar
                             routeMapper={{
                               LeftButton: (route, navigator, index, navState) =>
                                { 
                                    if(route.index === 0) {
                                        return null;
                                    }else {
                                        return(
                                            <TouchableHighlight onPress={() => {
                                                    navigator.jumpBack() //不能是当前栈里面的第一个页面
                                                }}>
                                                <Text>back</Text>
                                            </TouchableHighlight>
                                        )
                                    }
                                 },
                               RightButton: (route, navigator, index, navState) =>
                                 { 
                                    if(route.index === 2) {
                                        return null;
                                    }else {
                                        return(
                                            <TouchableHighlight onPress={() => {
                                                let routes = navigator.getCurrentRoutes()
                                                if (routes.length < 1) {
                                                    return;
                                                }
                                                if (routes.pop().index !== route.index) {
                                                    navigator.jumpForward() //不能是当前栈里面的最后一个页面
                                                }
                                            }}>
                                            <Text>forward</Text>
                                            </TouchableHighlight>)
                                    }
                                  },
                               Title: (route, navigator, index, navState) =>
                                 { return (<Text style={styles.Title}>{route.message}</Text>); },
                             }}
                            style={{backgroundColor: 'green'}}
                       />
                }

            >

            </Navigator>
        )

上面的导航栏的左右按钮分别是返回到上一个页面和跳转到下一个页面,要注意的是这里的跳转都是在路由栈里的路由间跳转的,所以在执行navigator.jumpForward()之前要判断当前页面不能是栈里面的最后一个页面,在执行navigator.jumpBack() 之前也要判断当前页面不能是栈里面的第一个页面。

下面我们简单介绍第二个页面,其他两个跟第二个页面类似:

class SecondPage extends Component {
    render () {
        return(
            <View style={{backgroundColor:'burlywood',flex:1}}>
                <TouchableHighlight 
                    onPress={() => {
                        this.props.navigator.push(this.props.routes[this.props.route.index+1])
                    }
                    }>
                <Text style={[styles.text,{fontSize:15}]}>第二页push</Text>
                </TouchableHighlight>
                <TouchableHighlight 
                    onPress={() => {
                        this.props.navigator.pop()
                        }
                    }>
                <Text style={[styles.text,{fontSize:15}]}>第二页pop</Text>
                </TouchableHighlight>
            </View>
        )
    }
}

在每个页面里面我们都可以获取到navigator、route这两个关键信息,这样我们就可以随意在当前页面跳转到指定的页面了。在这里要注意的是pop() push()这一组跳转动作和jumpBack() jumpForward()这一组跳转动作的区别在于前一组的跳转会改变路由栈 后一组不会。
以上代码都已经上传gitub ,源码下载

版权声明:本文已经搬迁到博主个人网站:http://13fafa.cn。

相关文章推荐

React Native未来导航者:react-navigation 使用详解

新开源的react-natvigation库备受瞩目。在短短不到3个月的时间,github上星数已达4000+。Fb推荐使用库,并且在React Native当前最新版本0.44中将Naviga

React Native 路由使用总结

React Native 路由因 React Native 版本设计到0.44之后,原先的 RN 路由完全失效了,首先我先附上原先路由写法,下面为原先路由代码:import React, { Comp...

eclipse+ddm调试android源码

讲这个的文章很多, 简单的说下我在调试过程中遇到的一些问题: 有一篇博客还行(其实就是把官方文档翻译了一变而已 - -!) : http://www.cnblogs.com/zhangweia/arc...

Spring MVC配置及拦截器的实现

如题所示,这里主要是介绍拦截器的使用了但是为了更贴合实际的项目所以我们先导入spring mvc框架。为了使用spring mvc我们要导入相关的包,它依赖于spring-web 和spring -w...

React—native 之 Navigator (导航路由)组件

# React Native 的 Navigator 组件 > 欢迎Follow我的GitHub: https://github.com/SpikeKing **React Nat...

UILabel设定行间距方法

NSString *textStr = @"iPhone规定:任何应用想访问麦克风,必须被授权麦克风服务。请进入“设置”->“隐私”->“麦克风”中打开QQ空间的麦克风服务。"; UI...

JDBC 连接 SQL2005 之经验总结

1.安装SQL Server 20052.启用TCP/IP协议在“程序->Microsoft SQL Server 2005->配置工具->SQL Server 外围应用配置器”中打开TCP/IP协议...

ReactNative页面跳转Navigator

React Native页面跳转NavigatorNavigator即导航器,通过导航器我们可以实现应用在不同的页面之间进行跳转。 导航器会建立一个路由栈,用来弹出,推入或者替换路由状态。该路由栈相...

React Native基于最新版本实现JsBundle预加载,解决白屏等待,界面秒开优化

前些时间和大家分享了一系列关于React Native For Android的文章。这两天又对React Native增量热更新的博客进行了填充,增加了图片增量更新的实现方案和过程。有兴趣的朋友可以...

React Router的一个完整示例

本博文提供一个单网页结构网页(SPA)使用React Router路由控制跳转的完整例子。 关于配置可以查看我之前的一篇博客:[一步一步进入React的世界(React+Webpack+ES6组合配置...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)