图标不会出现在 react-navigation v5 中

Question

我正在选项卡导航上寻找名称旁边的图标，但我收到此错误：

我不使用 expo 然后我通过这种方式导入:

import { Ionicons } from 'react-native-vector-icons/Ionicons';

并且：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

这是主要代码：

const MainTab=()=>{

  const Tab = createBottomTabNavigator();

  return(

<Tab.Navigator

screenOptions={({route})=>({
 tabBarIcon:({color, size})=>{
  let iconName;

  if (route.name=='Home') {

    iconName='ios-home'

  }else if(route.name=='Settings'){

  iconName='logo-settings'
 }

 return <Ionicons name={iconName} size={size} color={color} />
 }
})}
>


<Tab.Screen name="Home" component={Home} />

<Tab.Screen name="Settings" component={SecondPage} />


</Tab.Navigator>

  )}

我哪一部分做错了？

Answer 1

在你的声明中

import { Ionicons } from 'react-native-vector-icons/Ionicons';

您正在使用大括号从默认导出中提取 Ionicons，但它是默认导出，所以简单地说：

import Ionicons from 'react-native-vector-icons/Ionicons';

Answer 2

嘿，我以前遇到过这个问题，所以这里有一些关于如何解决它的建议，另外在底部找到附加的工作片段供您参考。

这里有几个解决方案：

1，关于此错误消息，请务必检查您的文件并确保您已正确导出组件并导入正确的文件中。

2，例如，在 react-navigation v5 中，您通常应该能够导出和导入组件，而无需在组件文件中定义任何导航常量。请参考片段 //React navigation v5 / v4.

3，关于 react-native-vector-icons 请注意 linking 是自动的，如果你手动 link 可能会出错，因为添加了额外的图标文件到您的 xcode 项目。关于安装 react-native-vector-icons 尝试以下步骤：

• npm 安装 react-native-vector-icons • 访问 info.plist 文件并粘贴以下字体片段（参考下方 // info.plist） • cd ios 运行 pod 安装和pod 更新。

// info.plist

<dict>
 <key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>


// React navigation v5 working example


    import React from 'react'
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
    import HomeNavigator from '../containers/Home/HomeNavigator'
    import AccountNavigator from '../containers/Account/AccountNavigator'
    import FavouritesNavigator from '../containers/Favourites/FavouritesNavigator'
    import Ionicons from 'react-native-vector-icons/Ionicons'


    const Tab = createBottomTabNavigator()

    function BottomTabs (){
      return (
        <Tab.Navigator initialRouteName='Home'
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? 'ios-home' : 'ios-home';
            } else if (route.name === 'Account') {
              iconName = focused ? 'ios-person' : 'ios-person';
            }else if (route.name === 'Favourites') {
              iconName = focused ? 'ios-heart' : 'ios-heart';
            }



            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: '#547DD3',
          inactiveTintColor: 'gray',
        }}>
        <Tab.Screen name='Home' component={HomeNavigator} />
        <Tab.Screen name='Favourites' component={FavouritesNavigator} />
        <Tab.Screen name='Account' component={AccountNavigator} />
        </Tab.Navigator>
      )
    }


    export default BottomTabs

//React navigation v5 / v4

    //v5
    export default Screen // into the navigation stack.

    //V4

    const  Screen = createStackNavigator({
      ScreenPage : {screen : ScreenPage},
    },{ mode: 'modal', headerMode: 'none'});
    export default Screen;

图标不会出现在 react-navigation v5 中

Icons don't show up in react-navigation v5

tabnavigator

reactjs

react-native

react-navigation

react-native-tabnavigator