react-navigation跨tab路由处理

最新推荐文章于 2024-04-26 20:20:05 发布
最新推荐文章于 2024-04-26 20:20:05 发布
阅读量3.5k 收藏 1
点赞数
分类专栏： React-Native


一般应用都有跨tab跳转的需求, 这就需要特别处理下路由. 下面是使用React-navigation作为路由组件的一种方式.http://www.bijishequ.com/detail/369321

具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwopush BillTwo, BillTwo 返回到 Bill账单首页.

首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavigator和其他组件.

const Components = {
    HomeTwo: { screen: HomeTwo, path:'app/HomeTwo' },
    HomeThree: { screen: HomeThree, path:'app/HomeThree' },
    BillTwo: { screen: BillTwo, path:'app/BillTwo' },
    BillThree: { screen: BillThree, path:'app/BillThree' },
}

const Tabs = TabNavigator({
     Home: {
         screen: Home,
         path:'app/home',
         navigationOptions: { 
             tabBar: {
                 label: '首页',
                 icon: ({tintColor}) => (<Image source={require('./images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     },
     Bill: {
         screen: Bill,
         path:'app/bill',
         navigationOptions: {
             tabBar: {
                 label: '账单',
                 icon: ({tintColor}) => (<Image source={require('./images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     },
     Me: {
         screen: Me,
         path:'app/me',
         navigationOptions: {
             tabBar: {
                 label: '我',
                 icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     }
   }, {
       tabBarPosition: 'bottom', 
       swipeEnabled: false,
       animationEnabled: false, 
       lazyLoad: false, 
       backBehavior: 'none', 
       tabBarOptions: {
           activeTintColor: '#ff8500', 
           inactiveTintColor: '#999',
           showIcon: true, 
           indicatorStyle: {
               height: 0  
           },
           style: {
               backgroundColor: '#fff', 
           },
           labelStyle: {
               fontSize: 10, 
           },
       },
 });


 const Navs = StackNavigator({
     Home: { screen: Tabs, path:'app/Home' },
     Bill: { screen: Tabs, path:'app/Bill' },
     Me: { screen: Tabs, path:'app/Me' },
     ...Components
 }, {
        initialRouteName: 'Home', 
        navigationOptions: { 
            header: {  
                style: {
                    backgroundColor: '#fff'
                },
                titleStyle: {
                    color: 'green'
                }
            },
            cardStack: { 
                gesturesEnabled: true
            }
        },
        mode: 'card',  
        headerMode: 'screen'
 });

在HomeTwo里使用react-navigation自带的reset action就可以重置路由信息了:

// push BillTwo
this.props.navigation.dispatch(resetAction);

// 使用reset action重置路由
const resetAction = NavigationActions.reset({
    index: 1,  // 注意不要越界
    actions: [  // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo
        NavigationActions.navigate({ routeName: 'Bill'}),
        NavigationActions.navigate({ routeName: 'BillTwo'})
    ]
});

从HomeTwo push 到 BillTwo页面后, 点击BillTwo的左上角导航按钮返回就能返回到Bill账单首页了.


http://www.bijishequ.com/detail/369321

具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwopush BillTwo, BillTwo 返回到 Bill账单首页.

首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavigator和其他组件.

const Components = {
    HomeTwo: { screen: HomeTwo, path:'app/HomeTwo' },
    HomeThree: { screen: HomeThree, path:'app/HomeThree' },
    BillTwo: { screen: BillTwo, path:'app/BillTwo' },
    BillThree: { screen: BillThree, path:'app/BillThree' },
}

const Tabs = TabNavigator({
     Home: {
         screen: Home,
         path:'app/home',
         navigationOptions: { 
             tabBar: {
                 label: '首页',
                 icon: ({tintColor}) => (<Image source={require('./images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     },
     Bill: {
         screen: Bill,
         path:'app/bill',
         navigationOptions: {
             tabBar: {
                 label: '账单',
                 icon: ({tintColor}) => (<Image source={require('./images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     },
     Me: {
         screen: Me,
         path:'app/me',
         navigationOptions: {
             tabBar: {
                 label: '我',
                 icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     }
   }, {
       tabBarPosition: 'bottom', 
       swipeEnabled: false,
       animationEnabled: false, 
       lazyLoad: false, 
       backBehavior: 'none', 
       tabBarOptions: {
           activeTintColor: '#ff8500', 
           inactiveTintColor: '#999',
           showIcon: true, 
           indicatorStyle: {
               height: 0  
           },
           style: {
               backgroundColor: '#fff', 
           },
           labelStyle: {
               fontSize: 10, 
           },
       },
 });


 const Navs = StackNavigator({
     Home: { screen: Tabs, path:'app/Home' },
     Bill: { screen: Tabs, path:'app/Bill' },
     Me: { screen: Tabs, path:'app/Me' },
     ...Components
 }, {
        initialRouteName: 'Home', 
        navigationOptions: { 
            header: {  
                style: {
                    backgroundColor: '#fff'
                },
                titleStyle: {
                    color: 'green'
                }
            },
            cardStack: { 
                gesturesEnabled: true
            }
        },
        mode: 'card',  
        headerMode: 'screen'
 });

在HomeTwo里使用react-navigation自带的reset action就可以重置路由信息了:

// push BillTwo
this.props.navigation.dispatch(resetAction);

// 使用reset action重置路由
const resetAction = NavigationActions.reset({
    index: 1,  // 注意不要越界
    actions: [  // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo
        NavigationActions.navigate({ routeName: 'Bill'}),
        NavigationActions.navigate({ routeName: 'BillTwo'})
    ]
});

从HomeTwo push 到 BillTwo页面后, 点击BillTwo的左上角导航按钮返回就能返回到Bill账单首页了.

一般应用都有跨tab跳转的需求, 这就需要特别处理下路由. 下面是使用React-navigation作为路由组件的一种方式.http://www.bijishequ.com/detail/369321

具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwopush BillTwo, BillTwo 返回到 Bill账单首页.

首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavigator和其他组件.

const Components = {
    HomeTwo: { screen: HomeTwo, path:'app/HomeTwo' },
    HomeThree: { screen: HomeThree, path:'app/HomeThree' },
    BillTwo: { screen: BillTwo, path:'app/BillTwo' },
    BillThree: { screen: BillThree, path:'app/BillThree' },
}

const Tabs = TabNavigator({
     Home: {
         screen: Home,
         path:'app/home',
         navigationOptions: { 
             tabBar: {
                 label: '首页',
                 icon: ({tintColor}) => (<Image source={require('./images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     },
     Bill: {
         screen: Bill,
         path:'app/bill',
         navigationOptions: {
             tabBar: {
                 label: '账单',
                 icon: ({tintColor}) => (<Image source={require('./images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     },
     Me: {
         screen: Me,
         path:'app/me',
         navigationOptions: {
             tabBar: {
                 label: '我',
                 icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     }
   }, {
       tabBarPosition: 'bottom', 
       swipeEnabled: false,
       animationEnabled: false, 
       lazyLoad: false, 
       backBehavior: 'none', 
       tabBarOptions: {
           activeTintColor: '#ff8500', 
           inactiveTintColor: '#999',
           showIcon: true, 
           indicatorStyle: {
               height: 0  
           },
           style: {
               backgroundColor: '#fff', 
           },
           labelStyle: {
               fontSize: 10, 
           },
       },
 });


 const Navs = StackNavigator({
     Home: { screen: Tabs, path:'app/Home' },
     Bill: { screen: Tabs, path:'app/Bill' },
     Me: { screen: Tabs, path:'app/Me' },
     ...Components
 }, {
        initialRouteName: 'Home', 
        navigationOptions: { 
            header: {  
                style: {
                    backgroundColor: '#fff'
                },
                titleStyle: {
                    color: 'green'
                }
            },
            cardStack: { 
                gesturesEnabled: true
            }
        },
        mode: 'card',  
        headerMode: 'screen'
 });

在HomeTwo里使用react-navigation自带的reset action就可以重置路由信息了:

// push BillTwo
this.props.navigation.dispatch(resetAction);

// 使用reset action重置路由
const resetAction = NavigationActions.reset({
    index: 1,  // 注意不要越界
    actions: [  // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo
        NavigationActions.navigate({ routeName: 'Bill'}),
        NavigationActions.navigate({ routeName: 'BillTwo'})
    ]
});

从HomeTwo push 到 BillTwo页面后, 点击BillTwo的左上角导航按钮返回就能返回到Bill账单首页了.


http://www.bijishequ.com/detail/369321

具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwopush BillTwo, BillTwo 返回到 Bill账单首页.

首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavigator和其他组件.

const Components = {
    HomeTwo: { screen: HomeTwo, path:'app/HomeTwo' },
    HomeThree: { screen: HomeThree, path:'app/HomeThree' },
    BillTwo: { screen: BillTwo, path:'app/BillTwo' },
    BillThree: { screen: BillThree, path:'app/BillThree' },
}

const Tabs = TabNavigator({
     Home: {
         screen: Home,
         path:'app/home',
         navigationOptions: { 
             tabBar: {
                 label: '首页',
                 icon: ({tintColor}) => (<Image source={require('./images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     },
     Bill: {
         screen: Bill,
         path:'app/bill',
         navigationOptions: {
             tabBar: {
                 label: '账单',
                 icon: ({tintColor}) => (<Image source={require('./images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     },
     Me: {
         screen: Me,
         path:'app/me',
         navigationOptions: {
             tabBar: {
                 label: '我',
                 icon: ({tintColor}) => (<Image source={require('./images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>),
             },
         }
     }
   }, {
       tabBarPosition: 'bottom', 
       swipeEnabled: false,
       animationEnabled: false, 
       lazyLoad: false, 
       backBehavior: 'none', 
       tabBarOptions: {
           activeTintColor: '#ff8500', 
           inactiveTintColor: '#999',
           showIcon: true, 
           indicatorStyle: {
               height: 0  
           },
           style: {
               backgroundColor: '#fff', 
           },
           labelStyle: {
               fontSize: 10, 
           },
       },
 });


 const Navs = StackNavigator({
     Home: { screen: Tabs, path:'app/Home' },
     Bill: { screen: Tabs, path:'app/Bill' },
     Me: { screen: Tabs, path:'app/Me' },
     ...Components
 }, {
        initialRouteName: 'Home', 
        navigationOptions: { 
            header: {  
                style: {
                    backgroundColor: '#fff'
                },
                titleStyle: {
                    color: 'green'
                }
            },
            cardStack: { 
                gesturesEnabled: true
            }
        },
        mode: 'card',  
        headerMode: 'screen'
 });

在HomeTwo里使用react-navigation自带的reset action就可以重置路由信息了:

// push BillTwo
this.props.navigation.dispatch(resetAction);

// 使用reset action重置路由
const resetAction = NavigationActions.reset({
    index: 1,  // 注意不要越界
    actions: [  // 栈里的路由信息会从 Home->HomeTwo 变成了 Bill->BillTwo
        NavigationActions.navigate({ routeName: 'Bill'}),
        NavigationActions.navigate({ routeName: 'BillTwo'})
    ]
});

从HomeTwo push 到 BillTwo页面后, 点击BillTwo的左上角导航按钮返回就能返回到Bill账单首页了.

slowlifes
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router 实现简单的tab页面切换
weixin_44494811的博客
07-27 4474
先上图： 标题：通过路由来实现简单的tab切换 import React from 'react'; import logo from './logo.svg'; import './App.css'; import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom' function App() { let tabHead=[
react实现路由跳转
qq_53008791的博客
08-13 9058
react路由跳转
React Native中导航组件react-navigation跨tab路由处理详解
11-28
前言 大家应该都有所体会，我们在一般应用都有跨tab跳转的需求， 这就需要特别处理下路由，所以 下面是使用react-navigation作为路由组件的一种方式. 具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill账单首页. 方法如下： 首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavigator和其他组件. const Components = { HomeTwo: { scree
集成react-navigation路由导航与避坑指南
最新发布
qq_42430654的博客
04-26 844
作为一个RN新人，在简单了解了控件使用后，一个重头就在于路由跳转React Native 官网指出现在主推的路由跳转方案是react-navigation，那么对于其他方案这边就不做了解了。react-navigation官网在集成这个东西的时候，踩过很多坑，业余时间吃了一个多礼拜，因此，这篇博文的目的在于简介react-navigation集成的流程，以及遇到各种问题的解决办法。
React技术原理与代码开发实战：React Native中的导航与路由
AI架构设计之禅
11-08 183
作者：禅与计算机程序设计艺术 1.背景介绍 概述 React Native是一个使用JavaScript开发跨平台应用的框架，其优点在于可以实现快速迭代，同时性能也非常优秀。无论是在Android上还是iOS上，React Native都能提供统一的开发体验。在产品
手把手带你基于ant design pro 5实现多tab页(路由keepalive)
fudebao的博客
03-20 3268
前几天在一个前端群里，看到一位群友在吐槽react不支持keepalive，没办法实现多页签，这篇文章就我就用react 基于antd pro 5实现一下这个功能。
react 路由跳转 底部tab切换
棋子
10-15 2290
routers.js文件 import React, { Component } from 'react' import { BrowserRouter as Router, Route ,Switch} from 'react-router-dom' import Ask from "../pages/ask" import Find from "../pages/find" import In...
React-navigation导航系统(2)
大灰狼的小绵羊哥哥的博客
05-08 5506
tags: React-native Navigators http://www.jianshu.com/p/8b38d1b654f9 Navigators允许你定义你的导航结构.Navigators也可以渲染普通的元素,例如你配置好的header和tab bar. navigators可以是单纯的React组件. 内建的Navigators react-navig
React Native react-navigation 导航使用详解
08-28
TabNavigator 是 react-navigation 库中的一种特殊的导航组件，可以实现界面间跳转、Tab 切换等功能。 （4）DrawerNavigator 实现抽屉导航菜单 DrawerNavigator 是 react-navigation 库中的一种特殊的导航组件，...
react-ReactNavigation带有自定义动画的TabBarComponent
08-14
在"alimek-react-navigation-custom-bottom-tab-component-f8e76cd"这个项目中，我们可以看到如何实现这样的功能。 首先，要创建一个自定义的TabBarComponent，你需要创建一个新的React组件，这个组件将接收`...
react-navigation Demo
07-21
这个Demo将向我们展示如何有效地使用`react-navigation`来管理应用中的路由和导航。`react-navigation`提供了多种导航器，如StackNavigator、TabNavigator、DrawerNavigator等，它们能够帮助我们构建出层次丰富的...
react 底部tabBar组件封装（路由跳转）
JunRoyal
06-11 1357
route.js import Index from "./pages/Index"; import TrulyIndex from "./pages/TrulyIndex"; // exact精确匹配 使得路由的匹配更严格 为true时表示严格匹配，为false时为正常匹配 // requireAuth是否需要身份验证 const routes = [ { path: "/trulyIndex", exact: true, requireAuth: true, co
React Native （RN）动态权限路由导航（react-navigation）配置
qq_42675769的博客
03-10 885
其实实现动态路由就是把不同类型的（StackNavigator，TabNavigator，DrawerNavigator）导航，动态的配置它们的RoutConfigs，NavigatorConfig属性。前者配置组件路由，后者配置导航样式属性等。
React-navigation导航系统(5)-Router
大灰狼的小绵羊哥哥的博客
05-08 6853
tags: React-Native Routers Router定义一个组件的navigation state,允许开发者定义路径和可以操作的actions. 内建的Routers StackRouterTabRouter 使用Routers 为了手动定制一个navigator,在组件里可以放一个静态的router.(使用内建的组件快速的定制一个nav
React 路由使用
360技术
05-31 528
Routerreact-router-dom是一个处理页面跳转的三方库，在使用之前需要先安装到我们的项目中：#npm npminstallreact-router-dom@6 #yarn yarnaddreact-router-dom@6简单路由使用路由时需要为组件指定一个路由的path，最终会以path为基础，进行页面的跳转。具体使用先看个简单示例，该示例比较...
react-navigation4.x动态路由和隐藏底部导航实现
Mybells
06-29 3232
import React from 'react'; import { Image, Text, StyleSheet, StatusBar } from 'react-native'; import { createBottomTabNavigator } from 'react-navigation-tabs'; import { BottomTabBar } from 'react-navi...
React Native在React Navigation6.0版本如何实现动态路由
ｎｅｗｘｃ
04-19 700
//在这里配置页面的路由 import PopularPage from '../page/PopularPage'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import TrendingPage from '../page/TrendingPage'; import FavoritePage from '../page/FavoritePage'; import {createBottomTabNavig.
react-router基本使用
抱着肩膀笑看看
12-05 618
react-router 提供了路由核心 api。如 Router, Route, Switch 等，但没有提供有关 dom 操作进行路由跳转的 api。 react-router-dom 提供了 BrowserRouter、Route、Link 等 api，可以通过 dom 操作触发事件控制路由。 react-router-dom 中依赖了 react-router，所以安装的时候只要安装 react-router-dom。 安装 如果安装版本在 >=6， Switch -->Routes v5 版本的文
react-native react-navigation
07-27
使用 React Navigation，你可以轻松地定义和配置应用程序的导航结构，包括页面之间的导航、导航参数传递和路由处理。它还提供了一些内置的导航组件，如 StackNavigator、TabNavigator 和 DrawerNavigator，可以直接...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值