如何在 React Native 中创建 Material Bottom Tab Navigator？

要使用 Material 创建底部选项卡导航器，我们需要使用 react-navigation 库中提供的 createMaterialBottomTabNavigator函数。它设计有屏幕底部的材质主题标签栏。它为您提供了令人愉悦的 UI 功能，并允许您通过动画在不同的路线之间切换。 Material Bottom Tab Navigator 最重要的亮点是路由是“惰性初始化”的，即，与路由对应的屏幕组件在被聚焦之前不会被挂载。

创建应用程序和安装模块：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init demo-app

• 第 3 步：现在进入您的项目文件夹 iedemo-app

  cd demo-app

• 第 4 步：使用以下命令安装所需的软件包：

  npm install –save react-navigation-material-bottom-tabs react-native-paper react-native-vector-icons

项目结构：项目目录应如下所示：

项目结构

示例：现在，让我们设置 Material Bottom Tab Navigator，以及一些基本的 CSS 样式。在我们的演示应用程序中将有 3 个屏幕：主屏幕、用户屏幕和设置屏幕。因此，我们将有 3 个选项卡在这 3 个屏幕之间导航。首先，我们将添加包含 Material Bottom Tab Navigator 逻辑的 App.js 文件。除了有关屏幕和标签的基本信息外，我们还将在设置时添加图标和基本样式。

App. js

import React from "react";
import { Ionicons } from "@expo/vector-icons";
import { createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from
    "react-navigation-material-bottom-tabs";
  
import HomeScreen from "./screens/HomeScreen";
import UserScreen from "./screens/UserScreen";
import SettingScreen from "./screens/SettingScreen";
  
const TabNavigator = createMaterialBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: (tabInfo) => (
          
        ),
      },
    },
    User: {
      screen: UserScreen,
      navigationOptions: {
        tabBarLabel: "User",
        tabBarIcon: (tabInfo) => (
          
        ),
      },
    },
    Setting: {
      screen: SettingScreen,
      navigationOptions: {
        tabBarLabel: "Setting",
        tabBarIcon: (tabInfo) => (
          
        ),
      },
    },
  },
  {
    initialRouteName: "Home",
    barStyle: { backgroundColor: "#006600" },
  }
);
  
const Navigator = createAppContainer(TabNavigator);
  
export default function App() {
  return (
    
      
    
  );
}

现在，我们需要导航到的三个屏幕。

HomeScreen.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Home = () => {
  return (
    
      Home Screen!
      
    
  );
};
  
export default Home;

UserScreen.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const User = () => {
  return (
    
      User Screen!
      
    
  );
};
  
export default User;

设置屏幕.js

import React from "react";
import { Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Settings = () => {
  return (
    
      Settings Screen!
      
    
  );
};
  
export default Settings;

运行文件：使用以下命令启动服务器。

expo start

输出：请注意，当您点击单个选项卡时，会有一个轻微的动画。这是由 Material Bottom Tab Navigator 自动提供的。

输出

参考： https://reactnavigation.org/docs/material-bottom-tab-navigator/