React Native 路由使用总结

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,可以了!

发布了105 篇原创文章 · 获赞 81 · 访问量 91万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览