Иконки не отображаются в реакции-навигации v5

Question

Я ищу значки рядом с именами на вкладке навигации, но я получаю эту ошибку:

Я не использую выставку, тогда я импортировал таким образом:

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, в реакции-навигации v5 вы, как правило, должны иметь возможность экспортировать и импортировать компоненты без определения любого константы навигации внутри файла компонента, например .. обратитесь к фрагменту кода // Реагирование навигации v5 / v4.

3, в отношении реакции-native-vector-icons обратите внимание, что связывание выполняется автоматически c, и если вы связываете его вручную, вы можете получить сообщение об ошибке, так как дополнительный файл значков добавлен в ваш проект xcode. Что касается установкиact-native-vector-icons, попробуйте выполнить следующие действия:

• npm installact-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;