material-ui的BottomNavigation的使用-白红宇

material-ui的BottomNavigation的使用

阅读量：2120 次

发布时间：2019-04-30

本文共 2335 字，大约阅读时间需要 7 分钟。

准备：下载 npm i @material-ui/core @material-ui/icons

这里在单独将BottomNavation再次封装组件使用(使用了react父子通信的知识)：

因为底部导航通常是作为公共出现的布局，所以这里放在app.jsx中

import React, { Component } from 'react';import {Link,Route,Switch,Redirect} from "react-router-dom";import Home from './views/home/Home.jsx'import Account from './views/account/Account.jsx'import Goods from './views/goods/Goods.jsx'import './App.scss';import FooterNav from './components/smallComponents/footerNav.jsx'class App extends Component {  changeRoute=(routerName)=>{      this.props.history.push(routerName);  }  render() {    return (        
               
                    
                         
                          
                           
         
          
        
       
      
                 
    
            
            
   
    );  }}export default App;

接着，在FooterNav.jsx中

import React from 'react';import PropTypes from 'prop-types';import BottomNavigation from '@material-ui/core/BottomNavigation';import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';import HomeIcon from '@material-ui/icons/Home';import DashboardIcon from '@material-ui/icons/Dashboard';import FaceIcon from '@material-ui/icons/Face';import './style.scss'class FooterNav extends React.Component {    state = {        value: 0,    };    static propTypes = {        appThis: PropTypes.object.isRequired,    }    componentWillMount(){        //处理页面刷新时value重置的问题        var current=this.props.appThis.props.location.pathname;        if(current=='/home'){            this.setState({ value:0 });        }else if(current=='/goods'){            this.setState({ value:1 });        }else if(current=='/account'){            this.setState({ value:2 });        }    }    handleChange = (event, value) => {        this.setState({ value });        var routerName='';        if(value==0){            routerName='/home'        }else if(value==1){            routerName='/goods'        }else if(value==2){            routerName='/account'        }        this.props.appThis.props.history.push(routerName);    };    render() {        const { value } = this.state;        const { classes } = this.props;        return (            
                   
                        
     } />                    
     } />                    
     } />                
                
   
        );    }}export default FooterNav;