Question

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

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

我尝试使用爱奥尼亚人自己的图标，但遇到相同的错误。我曾考虑过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);

Answer 1

我认为您可能需要修复进口。路径无效。

正确的导入路线：

import React from 'react';
import ReactNative from 'react-native';

Answer 2

问题出在您的routeName上

您写了 const routeName = navigation.state

代替

const { routeName } = navigation.state

您还需要更正进口货

import React from 'react'

并在课堂上宣告

export default class className extends React.Component{}

未定义的自定义图标反应导航

2 个答案: