Reactjs 未定义的自定义图标导航

我正在尝试将自己的图标添加到导航栏中（键入react navigation）。当我返回IconComponent时，我得到

undefined is not a function (near '..._reactNative.default.createElement...')

我尝试过使用Ionicons自己的图标，但我得到了相同的错误。我考虑过IconComponent是否需要其他输入，但我没有发现任何有用的东西。 我目前如何实施：

import React from 'react-native'
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import ListView from '../views/ListView';
import SettingsView from '../views/SettingsView'
import NearbyView from '../views/NearbyView'
import list from '../assets/icons/list.png'
import nearby from '../assets/icons/nearby.png'
import settings from '../assets/icons/settings.png'
import Ionicons from 'react-native-vector-icons/Ionicons';

const TabNavigator = createBottomTabNavigator({
    List: { screen: ListView },
    Nearby: { screen: NearbyView },
    Settings: { screen: SettingsView },
  }, { 
      defaultNavigationOptions: ({navigation}) => ({
          tabBarIcon: ({ tintColor }) => {
              const routeName = navigation.state
              let IconComponent = Ionicons;
              let iconName;
              if(routeName === 'List') {
                iconName = list;
              }
              else if(routeName === 'Nearby') {
                iconName = nearby;
              }
              else if(routeName === 'Settings') {
                iconName = settings;
              }

              return <IconComponent name={iconName} size={25} color={tintColor} />;
          }
      }),
      tabBarOptions: {
        activeTintColor: 'black',
        inactiveTintColor: 'gray',
      },
  });

  export default createAppContainer(TabNavigator);

从“React native”导入React
从“react navigation”导入{CreateBoottomTabNavigator，createAppContainer}；
从“../views/ListView”导入ListView；
从“../views/SettingsView”导入设置视图
从“../views/NearbyView”导入NearbyView
从“../assets/icons/list.png”导入列表
从“../assets/icons/nearest.png”导入附近
从“../assets/icons/settings.png”导入设置
从“反应本机向量图标/离子图标”导入离子图标；
const TabNavigator=createBottomTabNavigator({
列表：{screen:ListView}，
附近：{screen:NearbyView}，
设置：{屏幕：设置视图}，
}, { 
defaultNavigationOptions:（{navigation}）=>({
tabBarIcon:（{tintColor}）=>{
const routeName=navigation.state
让IconComponent=Ionicons；
让我来；
如果（routeName=='List'）{
iconName=列表；
}
else if（routeName===‘附近’）{
iconName=附近；
}
else if（routeName==='Settings'）{
iconName=设置；
}
返回；
}
}),
选项卡选项：{
activeTintColor:'黑色'，
颜色：“灰色”，
},
});
导出默认createAppContainer（TabNavigator）；

问题在于您的routeName

你写的

const routeName=navigation.state

而不是

const{routeName}=navigation.state

您还需要更正您的导入

import React from 'react'

和课堂教学

export default class className extends React.Component{}

---

我想你可能需要修正你的进口。路径无效

正确的进口路线：

从“React”导入React；
从“react native”导入ReactNative；

噢，哇，我没意识到这有什么不同。它很管用，谢谢！