0

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

在此处输入图像描述

我不使用 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>

  )}

我错了哪一部分？

4

2 回答 2

2

在你的声明中

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

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

import Ionicons from 'react-native-vector-icons/Ionicons';
于 2020-02-12T05:37:47.073 回答
0

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

这里有几个解决方案：

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

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

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

• npm install react-native-vector-icons • 访问 info.plist 文件并粘贴以下字体片段（参考下面 // info.plist） • cd ios run 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;

于 2020-03-08T21:31:48.273 回答