是否有一种方法可以显示图标而不是React-native MaterialBottomTabNavigator的标签

Question

我的目标是在react-native中使用某些图标标签代替文本标签，以用于底部导航栏。目前，我只能获取默认的文本标签。

这里是我尝试添加图标之前的导航容器：

<NavigationContainer>
    <Tab.Navigator
      initialRouteName="Today"
      activeColor="white"
      inactiveColor="grey"
      barStyle={styles.tabBar}
      shifting={false}
      labeled={true}
    >
      <Tab.Screen
        name="Today"
        component={TodayScene}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen name="Schedule" component={ScheduleScene} />
    </Tab.Navigator>
  </NavigationContainer >

我可以访问“ MaterialCommunityIcons”，但我不知道如何显示它们。我在“今日”标签屏幕上尝试了以下方法。这是我后来为了添加图标而写的内容：

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

我在“选项”下添加的内容几乎与react-navigation的官方网站上显示的格式相同：

https://reactnavigation.org/docs/material-bottom-tab-navigator/#api-definition

但是，它无法正常运行。我收到此错误：

“不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。”

所以，有人知道我如何在react-native中将图标添加到底部材质的导航栏中吗？

Answer 1

同样在这里……错误...。我什至不知道为什么甚至连我都提到他们……请帮助该怎么做

options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            //<Image src={.../path/to/your/asset/file} style={{height:30, width:30}} tintColor={color}/>
            //<MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}

当我从Tab.screen删除上面给出的代码，并且选项卡没有图标时就可以正常工作.....如何解决...谁能帮助我们]