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

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

这里有几个解决方案：

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

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

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

• npm install react-native-vector-icons • 访问 info.plist 文件并粘贴以下字体 sn-p（参考下面 // info.plist） • cd ios 运行 pod install 和 pod update。

// 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;