React Native 路由使用总结

来源：互联网发布：淘宝上怎么买到a货翡翠编辑：程序博客网时间：2024/05/30 05:00

React Native 路由

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

import React, { Component } from 'react';import { Provider } from 'react-redux';import { StatusBarIOS,Platform } from 'react-native';import { createMemoryHistory, Router, IndexRoute, Route } from 'react-router';import { createNavigatorRouter } from 'react-native-navigator-router';<Provider store={store}>    <Router history={createMemoryHistory('/')}>        <Route path='/' component={createNavigatorRouter()}>            <IndexRoute component={App} />            <Route path="/about" component={AllRoute} />        </Route>    </Router></Provider>

因长时间习惯使用 Vue 与 React 的路由，网上查询各种资料，找出类似 Vue/React的路由使用。但是React Native 升级到0.44 之后，运行直接报错，`createMemoryHistory('/')` 异常，也许是我的使用不当，或者说是环境原因，期间我也打开node_model研究过一番，也没整明白，总之呢，无法使用。

接下来,我将附上我的 RN 路由代码：

目录介绍

路由配置共分为两个文件：

1、路由（routes.js文件）。

2、路由配置routesConfig.js文件。

下面为两文件的代码：

1、routes.js 文件代码：

这个文件主要是用于处理 Navigator

import React, {    Component} from 'react'import { View, StyleSheet, Navigator, TouchableHighlight, Text, Dimensions } from 'react-native'const {    width,    height} = Dimensions.get('window');import Routes from './routesConfig.js';export default class UINavigator extends Component {    _routesLen = Number(Routes.length - 1); //索引从0 开始，路由的长度    render() {            const routes = Routes;            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) {                        return Navigator.SceneConfigs.PushFromRight;                        /*                            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 = {                    <Navigator.NavigationBar                routeMapper={{//导航栏路由映射器, 设置左键LeftButton, 右键RightButton, 标题Title.                    // 左键                    LeftButton: (route, navigator, index, navState) =>                    {                         if(route.index === 0) {                            return null;                        }else {                            return(                                <TouchableHighlight onPress={() => {                                        navigator.jumpBack() //不能是当前栈里面的第一个页面                                    }}>                                    <Text style={[styles.titleBar,{left:0}]} >返回</Text>                                </TouchableHighlight>                            )                        }                    },                    // 右键                    RightButton: (route, navigator, index, navState) =>                    {                         if(route.index === this._routesLen) {//                            return null;                        }else {                            return(                                <TouchableHighlight onPress={() => {                                    let routes = navigator.getCurrentRoutes()                                    if (routes.length < 1) {                                        return;                                    }                                    if (routes.pop().index !== route.index) {                                        navigator.jumpForward() //不能是当前栈里面的最后一个页面                                    }                                }}>                                <Text style={[styles.titleBar,{right:0}]} >下一步</Text>                                </TouchableHighlight>)                        }                    },                    Title: (route, navigator, index, navState) =>                    { return (<Text style={styles.TitleCont}>{route.message}</Text>); },                }}                style={styles.titleBarBg}                />            }        >        </Navigator>        )    }}const styles = StyleSheet.create({    navigator:{        width:width,        height:height,        backgroundColor:'#999999',        paddingTop:55,        flex:1,    },    titleBarBg:{        backgroundColor: '#008dfd',    },    TitleCont:{        fontSize:18,        color:'#FFFFFF',        alignItems:"center",        width:210,        marginTop:16,        textAlign: 'center',        justifyContent:"center",    },    titleBar:{        fontSize:14,        color:'#ffffff',        position:"relative",        top:16,        width:54,        height:55,        paddingLeft:5    }})

2、routesConfig.js文件

这个文件主要是用于配置路由组件

import Home from '../views/home'import App from '../views/stockInfo'import NetWork404 from '../views/404';import DemoAnimated from '../views/demo/DemoAnimated.js';export default Routes = [{    message: '我的首页',//title    index: 0,//索引    component: Home//组件}, {    message: '新闻、财务、关于',    index: 1,    component: App}, {    message: '我的旋转动画',    index: 2,    component: DemoAnimated}, {    message: '404页面',    index: 3,    component: NetWork404}];

使用

使用就很简单了，例如：

跳转下一页： navigator.push 方法

返回上一页,调用： navigator.pop() 方法, 使用当前页面出栈, 显示上一个栈内页面.例如：

返回第一页，调用： navigator.popToTop()方法

示例代码：

class Page1 extends Component {    render () {        return(            <View style={{backgroundColor:'blue',flex:1}}>                //跳转到下一页面                <TouchableHighlight                     onPress={() => {                        this.props.navigator.push(this.props.routes[this.props.route.index+1])                    }                    }>                <Text style={[styles.text,{fontSize:15}]}>第一页</Text>                </TouchableHighlight>                <Text style={[styles.text,{fontSize:15}]}>页面显示的内容：这是第一页</Text>            </View>        )    }}

class ThirdPage extends Component {    render () {        return(            <View style={{backgroundColor:'cornsilk',flex:1}}>                <TouchableHighlight                     onPress={() => {                        this.props.navigator.pop()//关键代码，返回到上一页                        }                    }>                <Text style={[styles.text,{fontSize:15}]}>第三页pop</Text>                </TouchableHighlight>                <TouchableHighlight                     onPress={() => {                        this.props.navigator.popToTop()//返回到第一页，也就是首页                        }                    }>                <Text style={[styles.text,{fontSize:15}]}>返回第一页</Text>                </TouchableHighlight>            </View>        )    }}

PS：pop()、 push() 与 jumpBack()、 jumpForward() 的区别：

1、pop()、 push()一组的跳转会改变路由栈。

2、jumpBack()、 jumpForward()不会改变。

OK，可以了！

0 0