检查BottomNavigation的渲染方法-React Native

Question

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

App.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