react-navigation4.x动态路由和隐藏底部导航实现

最新推荐文章于 2024-09-26 08:31:24 发布
最新推荐文章于 2024-09-26 08:31:24 发布
阅读量3.3k 收藏 2
点赞数 1
分类专栏： React 文章标签： react native reactnavigation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwe435541908/article/details/105972303
版权

1. 背景

由于rn移动端有一个需求要求通过工作台进入运维中心需要在底部导航栏上展示满足权限过滤的前四个模块。首先我需要把所有路由枚举出来，然后要通过权限过滤得到前四个路由模块，然后在底部导航栏上动态展示出来。那么要怎么在react-navigation4中的createBottomTabNavigator过滤不需要的路由呢？如何在不同页面隐藏底部路由？底部导航如何获取到权限？

2. 如何实现动态路由

由于createBottomTabNavigator API中有一个tabBarComponent属性可以自定义导航组件，而自定义导航组件可以用通过引入
react-navigation-tabs自带的底部自定义组件BottomTabBar，这个组件作用是实现跳转功能和底部导航按钮的样式展示。那么就可以将BottomTabBar封装为自己的组件，实现权限过滤及隐藏的逻辑，从而实现动态路由。

3. 如何隐藏动态路由导航栏

正常情况下，都会用createStackNavigator包裹createBottomTabNavigator。利用tabBarVisible实现：

const AppRouter = createStackNavigator({
  MyTab: MyTab,
  BottomNavigator: BottomNavigator,
});

BottomNavigator.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }
  return {
    tabBarVisible,
  };
};

自定义底部导航栏可以直接将BottomTabBar样式设置为display:flase实现：

<BottomTabBar navigation={myNavigation} style={{ display: this.state.isHidden ? 'none' : 'flex' }} />;

可以利用DeviceEventEmitter监听组件的改变，控制底部导航栏的隐藏显示。

4. 如何获取权限数据

可以通过给路由组件设置screenProps属性来给路由组件传递数据。路由组件中可以通过this.props.screenProps获取到传递过来的数据，然后进行路由的权限过滤。

screenProps:后代路由都可以通过this.props.screenProps获取到值。

   <MyTabRouter screenProps={{ module: this.props.user.menuByUserModule }} />;

5. 动画效果及代码

在这里插入图片描述

//router.js
import OperationIndex from './OperationIndex.js';
const RootNavigator = createStackNavigator({
  OperationIndex: {
    screen: OperationIndex,
    navigationOptions: {
      headerShown: false, // 自带头部置空
      gestureEnabled: false // 左侧滑动返回   ios默认开启，android默认关闭
    }
  }
})

//OperationIndex.js
import React from 'react';
import { Image, Text, StyleSheet, StatusBar } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { BottomTabBar } from 'react-navigation-tabs';
// import { DeviceEventEmitter } from 'react-native';
// 引入页面容器
import OperationCenter from './OperationCenter'
import AssetOperation from './AssetOperation'
import CreateApply from './CreateApply'
import MyApprove from './MyApprove'
import OperationAssist from './OperationAssist'
import WorkorderOperation from './WorkorderOperation'
import SpecialOperation from './SpecialOperation'
import CommandRecheck from './CommandRecheck'
import PasswordTogether from './PasswordTogether'
import ApproveHistory from './ApproveHistory'
import OperationLog from './OperationLog'
import AgentSet from './AgentSet'


import { connect } from "react-redux";
import { bindActionCreators } from 'redux';
import UserRoleProActions from '../../store/actions/user';


const operationInfo = {
  '运维中心': { route: 'OperationCenter', on: require('../../images/Icon/operations/OperationCenter_on.png'), off: require('../../images/Icon/operations/OperationCenter.png') },
  '资产运维': { route: 'AssetOperation', on: require('../../images/Icon/operations/AssetOperation_on.png'), off: require('../../images/Icon/operations/AssetOperation.png') },
  '新建申请': { route: 'CreateApply', on: require('../../images/Icon/operations/CreateApply.png'), off: require('../../images/Icon/operations/CreateApply.png') },
  '待我审批': { route: 'MyApprove', on: require('../../images/Icon/operations/MyApprove_on.png'), off: require('../../images/Icon/operations/MyApprove.png') },
  '运维协助': { route: 'OperationAssist', on: require('../../images/Icon/operations/OperationAssist_on.png'), off: require('../../images/Icon/operations/OperationAssist.png') },

  '工单运维': {
    route: 'WorkorderOperation', on: require('../../images/Icon/operations/WorkorderOperation_on.png'), off: require('../../images/Icon/operations/WorkorderOperation.png')
  },
  '特殊运维': { route: 'SpecialOperation', on: require('../../images/Icon/operations/SpecialOperation_on.png'), off: require('../../images/Icon/operations/SpecialOperation.png') },
  '命令复核': { route: 'CommandRecheck', on: require('../../images/Icon/operations/CommandRecheck_on.png'), off: require('../../images/Icon/operations/CommandRecheck.png') },
  '密码会同': {
    route: 'PasswordTogether', on: require('../../images/Icon/operations/PasswordTogether_on.png'), off: require('../../images/Icon/operations/PasswordTogether.png')
  },
  '审批历史': { route: 'ApproveHistory', on: require('../../images/Icon/operations/ApproveHistory_on.png'), off: require('../../images/Icon/operations/ApproveHistory.png') },
  '运维日志': { route: 'OperationLog', on: require('../../images/Icon/operations/OperationLog_on.png'), off: require('../../images/Icon/operations/OperationLog.png') },
  '代理设置': { route: 'AgentSet', on: require('../../images/Icon/operations/AgentSet_on.png'), off: require('../../images/Icon/operations/AgentSet.png') },
}



/* ****************************** tabbar ****************************** */
const getLabel = (label, tintColor) => {
  return <Text style={[styles.label, { color: tintColor }]}>{label}</Text>;
};
const getBarIcon = (routeName, focused) => {
  let Icon;
  if (routeName === '新建申请') {
    Icon = <Image style={styles.centerAdd} source={operationInfo[routeName].on} />;
  } else {
    Icon = focused ? <Image style={styles.icon} source={operationInfo[routeName].on} />
      :
      <Image style={styles.icon} source={operationInfo[routeName].off} />;
  }
  return Icon;
};
const getOption = (name) => {
  return {
    tabBarLabel: ({ focused, tintColor }) => {
      return getLabel(name, tintColor);
    },
    tabBarIcon: ({ focused, tintColor }) => {
      return getBarIcon(name, focused);
    },
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      StatusBar.setBarStyle('light-content');
      defaultHandler();
    }
  }
}

/* 路由页面 */
let tabbarRoutes = {
  OperationCenter: {
    screen: OperationCenter,
    navigationOptions: getOption('运维中心')
  },
  AssetOperation: {
    screen: AssetOperation,
    navigationOptions: getOption('资产运维')
  },
  CreateApply: {
    screen: CreateApply,
    navigationOptions: getOption('新建申请')
  },
  MyApprove: {
    screen: MyApprove,
    navigationOptions: getOption('待我审批')
  },
  OperationAssist: {
    screen: OperationAssist,
    navigationOptions: getOption('运维协助')
  },
  WorkorderOperation: {
    screen: WorkorderOperation,
    navigationOptions: getOption('工单运维')
  },
  SpecialOperation: {
    screen: SpecialOperation,
    navigationOptions: getOption('特殊运维')
  },
  CommandRecheck: {
    screen: CommandRecheck,
    navigationOptions: getOption('命令复核')
  },
  PasswordTogether: {
    screen: PasswordTogether,
    navigationOptions: getOption('密码会同')
  },
  ApproveHistory: {
    screen: ApproveHistory,
    navigationOptions: getOption('审批历史')
  },
  OperationLog: {
    screen: OperationLog,
    navigationOptions: getOption('运维日志')
  },
  AgentSet: {
    screen: AgentSet,
    navigationOptions: getOption('代理设置')
  }
}

/* routes */
const originalRoutes = [
  { key: 'OperationCenter', routeName: 'OperationCenter', name: '运维中心', params: undefined },
  { key: 'AssetOperation', routeName: 'AssetOperation', name: '资产运维', params: undefined },
  { key: 'CreateApply', routeName: 'CreateApply', name: '新建申请', params: undefined },
  { key: 'MyApprove', routeName: 'MyApprove', name: '待我审批', params: undefined },
  { key: 'OperationAssist', routeName: 'OperationAssist', name: '运维协助', params: undefined },
  { key: 'WorkorderOperation', routeName: 'WorkorderOperation', name: '工单运维', params: undefined },
  { key: 'SpecialOperation', routeName: 'SpecialOperation', name: '特殊运维', params: undefined },
  { key: 'CommandRecheck', routeName: 'CommandRecheck', name: '命令复核', params: undefined },
  { key: 'PasswordTogether', routeName: 'PasswordTogether', name: '密码会同', params: undefined },
  { key: 'ApproveHistory', routeName: 'ApproveHistory', name: '审批历史', params: undefined },
  { key: 'OperationLog', routeName: 'OperationLog', name: '运维日志', params: undefined },
  { key: 'AgentSet', routeName: 'AgentSet', name: '代理设置', params: undefined },
];

//自定义BottomTabBar
class CustomBottomTabBar extends React.Component {
  //这里对navigation进行处理，注意这里不能直接修改props.navigation,会报错，
  //所以只需要传入一个自定义的navigation，而BottomTabBar只会用到navigation.state中routes和index,
  //所以就构造这么一个虚假的navigation就可以了
  state = {
    isHidden: false
  }
  /* 控制底部导航栏显示隐藏 */
  // componentDidMount() {
  //   DeviceEventEmitter.addListener('closeBottomTab', (val) => {
  //     this.setState({ isHidden: val })
  //   });
  //  DeviceEventEmitter.emit('closeBottomTab', false);
  // }
  // componentWillUnmount() {
  //   DeviceEventEmitter.removeListener('closeBottomTab');
  // }

  dealNavigation = () => {
    const { routes, index } = this.props.navigation.state;
    // 根据是否需要显示商品推荐菜单来决定state中的routes
    let finalRoutes = this.filterOperation();
    const currentRoute = routes[index];
    return {
      state: {
        index: finalRoutes.findIndex(route => currentRoute.key === route.key), //修正index
        routes: finalRoutes
      }
    };
  };

  filterOperation = (arr) => {
    if (this.props.screenProps.module) {
      let operation = this.props.screenProps.module.filter(item => item.menuName === '运维中心')[0].childMenu.slice(0, 4);
      let nameArr = operation.map(item => item.menuName);
      return originalRoutes.filter(route => route.name === '运维中心' || nameArr.includes(route.name))
    } else {
      return originalRoutes
    }
  }

  render() {
    const { navigation, ...restProps } = this.props;
    const myNavigation = this.dealNavigation();
    return <BottomTabBar {...restProps} navigation={myNavigation} style={{ display: this.state.isHidden || myNavigation.state.index === -1 ? 'none' : 'flex' }} />;
  }
}

const MyTabRouter = createBottomTabNavigator(tabbarRoutes, {
  tabBarComponent: CustomBottomTabBar,
  backBehavior: 'initialRoute',
  swipeEnabled: true,
  animationEnabled: true,
  initialRouteName: 'OperationCenter',
  tabBarOptions: {
    // label和icon的背景色 活跃状态下（选中） ios
    activeBackgroundColor: 'rgba(0,0,0,0)',
    // label和icon的前景色 活跃状态下（选中）
    activeTintColor: '#FF9023',
    // label和icon的背景色 不活跃状态下（未选中） ios
    inactiveBackgroundColor: 'rgba(0,0,0,0)',
    // label和icon的前景色 不活跃状态下(未选中)
    inactiveTintColor: '#817F7F',
    showIcon: true,
    showLabel: true,
    style: {
      borderTopColor: '#E4E7ED',
      backgroundColor: 'rgba(250,250,250,0.9)',
    }
  }
});

class BottomTab extends React.Component {
  //这里必须有这个静态属性，表示将这个页面视为一个navigator，这样才能和AppStack共用一套导航系统
  static router = MyTabRouter.router;
  render() {
    //screenProps:后代路由都可以通过this.props.screenProps获取到值
    return <MyTabRouter {...this.props} screenProps={{ module: this.props.user.menuByUserModule }} />;
  }
}


const mapStateToProps = state => ({ user: state.user });

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(UserRoleProActions, dispatch),
  dispatch: dispatch
});
export default connect(mapStateToProps, mapDispatchToProps)(BottomTab);

const styles = StyleSheet.create({
  icon: {

  },
  centerAdd: {
    marginTop: -20
  },
  label: {
    fontSize: 11,
    textAlign: 'center'
  }
});

参考
https://juejin.im/post/5cff4f516fb9a07ea803c0f5

My_Bells
关注
专栏目录
React Navigation 5.x版本实战指南
xiangzhihong8的专栏
03-04 401
如果你想了解React Navigation 5.x的基本的概念，可以查看我之前的发的一篇文章：React Navigation 5.x详解 如果说构成视图元素的基本单位是组件，那么构成应用程序的基本单位就是页面。在前端应用中，页面又称为路由，是应用程序页面的抽象概念。由于单页面的应用是不存在的，那么对于拥有多个页面的应用程序来说，如何从一个页面平滑地过渡到另一个页面，就是路由需要完成的事情。 在0.44版本之前。开发者可以直接使用官方提供的Navigator组件来实现页面的跳转，不过Navigator组件
React Navigation 5.x详解
xiangzhihong8的专栏
12-01 953
React Navigation简介 在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不再被官方推荐使用。此时，我们可以选择由React Native社区开源的一款路由导航库React Navigati
react native navigation 隐藏 bottomTab
wf824284257的博客
12-22 1584
react native navigation 隐藏 bottomTab 前言 在做 react-native app 时， 用到了 react navigation 的 bottom tab navigation， 但是在某些情况下需要控制 bottom tab bar 的显示和隐藏。 试了很多中方法，最后比较简单的方式是修改nodeModels里面的源码。 本文 react-native 版本...
react-navigation 4.x navigationOptions 设置导航栏透明
iOSTianNan的博客
04-25 1643
static navigationOptions = ({navigation}: any) => { return { headerShown: true,// 是否使用导航栏 headerTransparent:true, //导航栏是否透明 } }
React Navigation Bottom Sheet 项目教程
最新发布
gitblog_01002的博客
09-26 527
React Navigation Bottom Sheet 项目教程 react-navigation-bottom-sheet 项目地址: https://gitcode.com/gh_mirrors/re/react-nav...
React Navigation实现嵌套路由
qq_44184452的博客
06-25 542
react-navigation实现嵌套路由和tab路由
React Native （RN）动态权限路由导航（react-navigation）配置
qq_42675769的博客
03-10 1039
其实实现动态路由就是把不同类型的（StackNavigator，TabNavigator，DrawerNavigator）导航，动态的配置它们的RoutConfigs，NavigatorConfig属性。前者配置组件路由，后者配置导航样式属性等。
React Native在React Navigation6.0版本如何实现动态路由
ｎｅｗｘｃ
04-19 741
//在这里配置页面的路由 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 Native react-navigation 导航使用详解
08-28
React Native react-navigation 导航使用详解 React Native 中的 react-navigation 库是当前最流行的导航解决方案之一，该库提供了强大的导航功能，可以满足大多数移动应用程序的需求。下面我们将详细介绍 react-...
React-Navigation 5.X 学习记录（一）------ StackNavigator 篇
G-shitou的博客
03-01 2927
安装 react-navigation 5 将各个导航部分独立出来了，安装需要一个一个安装。 // 安装react-navigation yarn add @react-navigation/native // 安装依赖库 yarn add react-native-gesture-handler react-native-reanimated react-native-screens react...
ReactNavigation4:在React Native App中进行导航的示例（React Navigation的版本4）
03-15
ReactNavigation5 React Navigation 4的编码示例 //reactnavigation.org/docs/4.x/getting-started 该项目的设置方式 expo init ReactNavigation4 --npm --template空白 附加套餐 npm install react-navigation expo install react-native-gesture-handlerreact-native-reanimated react-native-screens react-native-safe-area-context @ react-native-community / masked-view npm install react-navigation-stack @ react-native-community / ma
使用react-native-tab-navigator,push之后隐藏tabbar
02-20
使用react-native-tab-navigator,push之后隐藏tabbar 详见:http://www.cnblogs.com/shaoting/p/5934725.html
reactnative底部导航栏
08-10
react-native底部导航栏，支持Android和iOS。
react-navigation导航控件使用
12-25
react-native流行的导航器控件，React-navigation导航器的使用
react-ReactNavigation带有自定义动画的TabBarComponent
08-14
ReactNavigation - 带有自定义动画的TabBarComponent
react native Navigator 隐藏、自定义
u011690583的博客
04-21 7408
直奔主题：在使用React Native Navigator的时候，很多同学跟我一样，上来就用，但是用了发现一个问题，那就是如下图：看到此处 登录的文字，为毛android上就要跑偏了，当然毕竟使系统的问题，但是对于我们要求必须在中间的怎么办，我还想在navigator上添加其他的图片按钮等等，怎么办？看看效果，其实我们更希望是这样的：当然，这里做的 是使用官方的navigator api 而不是自
集成react-navigation路由导航与避坑指南
qq_42430654的博客
04-26 1157
作为一个RN新人，在简单了解了控件使用后，一个重头就在于路由跳转React Native 官网指出现在主推的路由跳转方案是react-navigation，那么对于其他方案这边就不做了解了。react-navigation官网在集成这个东西的时候，踩过很多坑，业余时间吃了一个多礼拜，因此，这篇博文的目的在于简介react-navigation集成的流程，以及遇到各种问题的解决办法。
React Native入门篇—react-navigation路由配置
长腿欧巴的博客
01-10 2809
本人学习React Native没有看过任何教学视频，都是按照官网一步步学习的。只研究了Android开发，所以下面的教程都是Android开发教程。 注意：未经允许不可私自转载，违者必究 React Native官方文档：https://reactnative.cn/docs/getting-started/ react-navigation官方网站：https://reactnavi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值