如何在 ReactJS 中使用 BottomNavigation 组件？

BottomNavigation 是 Material UI 中提供的一个底部导航栏组件，可以方便的实现类似于 TabBar 的效果。在 ReactJS 中，使用 BottomNavigation 组件也非常简单，下面将介绍如何使用。

安装

首先需要安装 Material UI 组件库。在命令行中执行以下命令进行安装：

npm install @material-ui/core

使用

在 ReactJS 中使用 BottomNavigation 组件，需要引入 BottomNavigation、BottomNavigationAction 以及 RestoreIcon 组件：

import React from 'react';
import { BottomNavigation, BottomNavigationAction } from '@material-ui/core';
import RestoreIcon from '@material-ui/icons/Restore';

然后在 render 函数中创建一个 BottomNavigation 组件，并为其添加 BottomNavigationAction 子组件。例如：

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <BottomNavigation value={value} onChange={handleChange}>
      <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
      <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
      <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
      <BottomNavigationAction label="Folder" icon={<FolderIcon />} />
    </BottomNavigation>
  );
}

其中，value 和 onChange 分别用于控制当前选中的底部导航栏按钮和切换底部导航栏按钮时的回调函数。BottomNavigationAction 组件可以通过添加 icon 和 label 属性来设置按钮的图标和文本。可以根据实际需求添加更多的 BottomNavigationAction 子组件。

样式调整

BottomNavigation 组件也提供了多种可自定义的样式，可以通过添加 classes 属性来指定样式。例如：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    backgroundColor: '#fff',
    height: 64,
    margin: 'auto',
    maxWidth: 600,
    position: 'fixed',
    bottom: 0,
    left: 0,
    right: 0,
  },
});

export default function App() {
  const classes = useStyles();

  return (
    <BottomNavigation value={value} onChange={handleChange} className={classes.root}>
      ...
    </BottomNavigation>
  );
}

通过 makeStyles 函数定义一个样式对象，并将其传递给 BottomNavigation 组件的 classes 属性。即可自定义底部导航栏的样式。

结语

至此，使用 Material UI 中的 BottomNavigation 组件已经介绍完毕。可以根据实际需求灵活运用，实现更好的界面效果。