检查BottomNavigation-React Native的渲染方法

Question

我正在react native项目中创建底部导航。对于以下编码，它工作正常。

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>
  );
}

但是我需要在标签上添加图标。所以我在屏幕上添加了以下道具

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

添加这些道具后，我得到以下错误

不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

根据文件，我做的每件事都是正确的。建议使用React导航文档中的道具。我的编码有什么问题？我需要在我的标签图标

Answer 1

我相信你必须在标签上创建图标。航海家道具。

下面是一个使用不同图标包的示例，但其工作原理相同：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

如果有人遇到此问题，请检查您使用的@react导航包的版本。如果其中一个包使用的主版本与其他包不同，则可能会发生此错误。如果是这种情况，只需降级或升级不匹配的包。升级通常需要更改。通常会有关于升级之间发生更改的发行说明。以下是@react导航/物料底部选项卡的升级说明。

Answer 3

这可以通过导入MaterialCommunityIcons（如

从'react native vector icons/materialcommunitycons'导入MaterialCommunitycons