React Native添加底部导航栏遇Ionicons引用错误及弃用警告

1. 修复"Ionicons doesn't exist"错误 #

• 先安装Ionicons依赖：
  • Expo项目执行：expo install @expo/vector-icons
  • 裸React Native项目执行：npm install react-native-vector-icons（RN 0.60+版本自动链接，低版本需手动配置）
• 在代码顶部导入Ionicons组件：

  import Ionicons from '@expo/vector-icons/Ionicons'; // Expo项目用这个
  // 裸项目替换为：
  // import Ionicons from 'react-native-vector-icons/Ionicons';
  

• 你之前尝试的<IonIcon>是错误写法，组件名应为<Ionicons>，保持原代码中return <Ionicons name={iconName} size={size} color={color} />;即可。

2. 消除tabBarOptions弃用警告 #

React Navigation v6+已废弃tabBarOptions属性，需将所有配置迁移到screenOptions内：

• 删除原代码中的tabBarOptions块
• 将tabBarActiveTintColor、tabBarInactiveTintColor直接加入screenOptions对象
• tabBarLabelStyle和tabBarStyle作为screenOptions的独立属性配置

修改后的完整代码 #

import React from "react";
import { View } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from '@expo/vector-icons/Ionicons'; // 根据项目类型调整导入路径

// Screens
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
import SettingsScreen from './screens/SettingsScreen.js';

// Screen names
const homeName = "Home";
const detailsName = "Details";
const settingsName = "Settings";

const Tab = createBottomTabNavigator();

function MainContainer() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName={homeName}
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            const rn = route.name;

            if (rn === homeName) {
              iconName = focused ? 'home' : 'home-outline';
            } else if (rn === detailsName) {
              iconName = focused ? 'list' : 'list-outline';
            } else if (rn === settingsName) {
              iconName = focused ? 'settings' : 'settings-outline';
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
          // 原tabBarOptions的配置迁移到这里
          tabBarActiveTintColor: "tomato",
          tabBarInactiveTintColor: "grey",
          tabBarLabelStyle: {
            paddingBottom: 10,
            fontSize: 10
          },
          tabBarStyle: [
            {
              display: "flex"
            },
            null
          ]
        })}>

        <Tab.Screen name={homeName} component={HomeScreen} />
        <Tab.Screen name={detailsName} component={DetailsScreen} />
        <Tab.Screen name={settingsName} component={SettingsScreen} />

      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default MainContainer;

额外提示 #

• 原代码中导入的createNativeStackNavigator未被使用，可以删除以减少冗余
• 裸React Native项目安装react-native-vector-icons后，iOS端需执行cd ios && pod install完成配置

内容的提问来源于stack exchange，提问作者ShopEySwing