Проверьте метод рендеринга BottomNavigation - React Native

Question

Я создаю нижнюю навигацию в собственном проекте. Он работает нормально для следующего кодирования.

Приложение. js

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { MaterialCommunityIcons } from 'react-native-vector-icons';
import { NavigationContainer } from '@react-navigation/native'

import Accounts from './src/components/Accounts';
...importing other screens here...

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      activeColor="#e91e63"
      labelStyle={{ fontSize: 12 }}
      style={{ backgroundColor: 'tomato' }}
    >
      <Tab.Screen name="Accounts" component={Accounts} />
      ...Other screens comes here...
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  )
}

Но мне нужно добавить значки на вкладки. Поэтому я добавил следующие реквизиты к Screen

<Tab.Screen
  name="Accounts"
  component={Accounts}
  options={{
    tabBarLabel: 'Home',
    tabBarIcon: ({ color, size }) => (
      <MaterialCommunityIcons name="home" color={color} size={size} />
    ),
  }}
/>

После добавления этого реквизита я получаю следующую ошибку

Инвариантное нарушение: Тип элемента недопустим: ожидаемая строка ( для встроенных компонентов) или класс / функция (для составных компонентов), но получили неопределенное значение. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена

, согласно документации, я все делаю правильно. Реквизит предлагается из документации React Navigation. Что не так в моем кодировании? Мне нужны иконки во вкладках

Answer 1

Полагаю, вы должны создать значки на вкладке Tab.Navigator.

Вот пример использования другого пакета значков, но он должен работать одинаково: https://reactnavigation.org/docs/en/tab-based-navigation.html

// You can import Ionicons from @expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import { Ionicons } from '@expo/vector-icons';

// (...)

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 2

Это можно исправить, импортировав MaterialCommunityIcons как

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';