Question

我想在我的底部标签导航器中添加自定义图标。但是，每当我尝试使用tabBarIcon时，都会出现此错误：renderIcon不是函数（在TabBarIcon.tsx第40行中）。有什么想法可以解决此错误吗？

这是我的依赖项：

    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/material-top-tabs": "^5.2.16",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",

下面是我的代码：

const Tab = createBottomTabNavigator();

const TabBarIcon = (img_src) => {
  return (
    <Image
      style={{
        width: 22,
        height: 26.4,
      }}
      source={img_src}
    />
  );
};

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator initialRouteName="MyNotes">
      <Tab.Screen
        name="MyNotes"
        component={MyNotes}
        options={{
          tabBarLabel: "Notes",
          tabBarIcon: TabBarIcon("../assets/notes.png"),
        }}
      />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Discover" component={Discover} />
      <Tab.Screen name="MyProfile" component={MyProfile} />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;

我还尝试用替换TabBarIcon（“ ../ assets / notes.png”），但有相同的错误。

Answer 1

像这样渲染tabBarIcon。

导入资产图标

import home_icon from './assets/images/home-icon.png';
import notification_icon from './assets/images/notification-icon.png';
import favourites_icon from './assets/images/favourites-icon.png';

用于tabBarActive和非活动颜色

const tabActiveColor = '#030303';
const tabInActiveColor = '#666666';

选项卡实现的其余部分将是这样。

<Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let tabIcon = home_icon

if (route.name === 'Home') {
              tabIcon = home_icon;
            } else if (route.name === 'Notification') {
              tabIcon = notification_icon;
            } else if (route.name === 'Favourite') {
              tabIcon = favourites_icon;
            } 
            // You can return any component that you like here!
            return (
              <Image
                source={tabIcon}
                resizeMode='contain'
                style={{
                  height: 30,
                  width: 30,
                  tintColor: focused ? tabActiveColor : tabInActiveColor,
                }}
              />
            );
          },
        })}
        tabBarOptions={{
          showLabel: false,
          style: { zIndex: 110 },
          safeAreaInset: { bottom: 'never' },
        }}
      >
        <Tab.Screen
          name='Home'
          component={this.HomeStackScreen}
          options={({ route }) => ({
            tabBarVisible: this.getTabBarVisible(route),
          })}
        />
<Tab.Screen name='Notification' component={NotificationModule} />

        <Tab.Screen name='Favourite' component={FavouriteModule} />
        
      </Tab.Navigator>

使用react-navigation v5

1 个答案: