React Native 在 Tab 导航底部添加图标

17 Mar 2025 | 阅读 2 分钟

在本节中，我们将在 Tab 导航底部添加图标。在深入学习本教程之前，请先阅读上一篇教程 Tab 导航，其中我们介绍了如何实现底部 Tab 导航。

在 Tab 导航底部添加图标的示例

首先将所需的库和依赖项添加到 React Native 项目中

1. 使用以下命令添加 react navigation 库

2. 使用以下命令添加 react native gesture handler 库

3. 使用以下命令添加 react native vector icons 库

成功执行以上命令后，使用以下命令将这些库链接到 react native 项目

以上命令在 D:\your_directory\your_reactNativeProject\package.json 文件中添加以下依赖项。

"react-native-gesture-handler": "^1.1.0",
"react-native-vector-icons": "^6.3.0",
"react-navigation": "^3.3.2"

D:\your_directory\your_reactNativeProject\android\app\build.gragle

implementation project(':react-native-vector-icons')
implementation project(':react-native-gesture-handler')

D:\your_directory\your_reactNativeProject\android\settings.gradle 文件

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-vector-icons\android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')

略微修改 (用 '/' 替换 '\') 上述路由结构为

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

D:\your_directory\your_reactNativeProject\android\app\src\main\java\com\ reactNativeProject\MainApplication.java

import com.oblador.vectoricons.VectorIconsPackage;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
. . .
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        new VectorIconsPackage(),
        new RNGestureHandlerPackage()
  );
}

App.js

为两个标签 "Home" 和 "Profile" 分别创建两个类 "HomeScreen" 和 "ProfileScreen"。createBottomTabNavigator 函数在屏幕底部创建一个标签栏，允许您在不同的路由之间切换。

将 "HomeScreen" 映射到 "Home" 和 "ProfileScreen" 映射到 "Profile" 标题。Icon 标签将图标添加到标签导航。我们可以从 ionicons.com 使用不同的图标名称

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
class HomeScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
          <Text>Home Screen</Text>
        </View>
    );
  }
}
class ProfileScreen extends React.Component {
  render() {
    return (
        <View style={styles.container}>
          <Text>Profile Screen</Text>
        </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator(
    {
      Home:{
        screen:HomeScreen,
        navigationOptions:{
          tabBarLabel:'Home',
          tabBarIcon:({tintColor})=>(
              <Icon name="ios-home" color={tintColor} size={25}/>
          )
        }
      },
      Profile: {
        screen:ProfileScreen,
        navigationOptions:{
          tabBarLabel:'Profile',
          tabBarIcon:({tintColor})=>(
              <Icon name="ios-person" color={tintColor} size={25}/>
          )
        }
      },
    },
    {
      initialRouteName: "Home"
    },
);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
});

export default createAppContainer(TabNavigator);

输出