如何在 React Native 中的选项卡导航底部添加图标？

在 React Native 中的选项卡导航底部添加图标是一项相当容易的任务。在本文中，我们将实现一个基本应用程序来学习在标签导航中使用图标。为此，我们首先需要设置应用程序并安装一些软件包。

实施：现在让我们从实施开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init tab-navigation-icons
```
第 3 步：现在进入您的项目文件夹，即 tab-navigation-icons
```
cd tab-navigation-icons
```

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

npm install --save react-navigation react-native-gesture-handler 
npm install --save react-native-vector-icons

项目结构：它将如下所示。

示例：现在，让我们设置 Tab Navigator 并添加图标，以及一些基本的 CSS 样式以使图标看起来像样。我们的演示应用程序中将有 3 个屏幕，即主屏幕、用户屏幕和设置屏幕。因此，我们将有 3 个选项卡在这 3 个屏幕之间导航，我们的主屏幕是默认屏幕。

App.js

import React from "react";
import { Ionicons } from "@expo/vector-icons";
import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
  
import HomeScreen from "./screens/HomeScreen";
import UserScreen from "./screens/UserScreen";
import SettingScreen from "./screens/SettingScreen";
  
const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarLabel: "Home",
      tabBarOptions: {
        activeTintColor: "#006600",
      },
      tabBarIcon: (tabInfo) => {
        return (
          
        );
      },
    },
  },
  User: {
    screen: UserScreen,
    navigationOptions: {
      tabBarLabel: "User",
      tabBarOptions: {
        activeTintColor: "#006600",
      },
      tabBarIcon: (tabInfo) => {
        return (
          
        );
      },
    },
  },
  Setting: {
    screen: SettingScreen,
    navigationOptions: {
      tabBarLabel: "Setting",
      tabBarOptions: {
        activeTintColor: "#006600",
      },
      tabBarIcon: (tabInfo) => {
        return (
          
        );
      },
    },
  },
});
  
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

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

SettingsScreen.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;

上面的代码包含我们的标签导航器的逻辑，在标签导航的底部有图标。现在，我们需要导航到的屏幕。

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;

用户界面

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;

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnavigation.org/docs/tab-based-navigation/