проблема с tabBarIcon в реакции навигации v5

Question

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

Это мой код:

<Tab.Screen name="Home" component={Home} options={{tabBarIcon:'home'}} />

Это ошибка, которую я получаю:

Как я могу это исправить?

Answer 1

Вам необходимо импортировать реальный путь (файл TabBarIcon)

import React from 'react';
import { Ionicons } from '@expo/vector-icons';

export default function TabBarIcon(props) {
    return (
        <Ionicons
            name={props.name}
            size={26}
            color={props.focused ? 'red' : 'black'}
            style={{ marginBottom: -3 }}
        />
    );
}

, и вам нужно выбрать правильный значок (ios и md) (Часть маршрутизатора. js)

import React from "react";
import { Platform } from "react-native";
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createSwitchNavigator } from 'react-navigation';
import TabBarIcon from "./components/TabBarIcon";
import Home from './components/Home';
import Register from './components/Register'

// Home page
const HomeStack = createStackNavigator({
    Home: Home,
});

HomeStack.navigationOptions = {
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={
                Platform.OS === 'ios'
                    ? `ios-home`
                    : 'md-home'
            }
        />
    ),
};

HomeStack.path = '';

Answer 2

Для свойства showIcon необходимо установить значение true в tabBarOptions следующим образом:

  <Tab.Navigator tabBarOptions={{ showIcon: true }}>

, а затем можно установить значок для ваш экран выглядит так:

<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon:(tabInfo) => (<MaterialIcons name="home" size={18} color={tabInfo.tintColor} />)}}/>

пример полного кода:

 import React from "react";
    import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
    import HomeScreen from "../screens/HomeScreen";
    import { MaterialIcons } from "@expo/vector-icons";

    const Tab = createMaterialTopTabNavigator();

    const MyTabs = (props) => {
      return (
        <Tab.Navigator
          tabBarOptions={{ showIcon: true, showLabel: false }}
        >
          <Tab.Screen
            name="Home"
            component={HomeScreen}
            options={{
              tabBarIcon: (tabInfo) => (
                <MaterialIcons name="home" size={18} color={tabInfo.tintColor} />
              ),
            }}
          />
        </Tab.Navigator>
      );
    };

    export default MyTabs;