个人中心
gpt4 book ai didi

Using Material icon with(将材质图标用于)

转载 作者：bug小助手 更新时间：2023-10-25 15:20:39 32 4
gpt4 key购买 nike



I am new to React native so sorry if the question is dump.

我是新手，如果这个问题是垃圾的话，我很抱歉。


I would like to use the icon in material icons from https://mui.com/material-ui/material-icons/ in my material bottom nav bar from react navigation.

我想在我的材料底部导航栏中使用来自https://mui.com/material-ui/material-icons/的材料图标中的图标。


But the example given here https://reactnavigation.org/docs/material-bottom-tab-navigator/ is using material community icons. How can I change it to icons listed in https://mui.com/material-ui/material-icons/? Any help is appreciated. Many thanks.

但这里给出的例子https://reactnavigation.org/docs/material-bottom-tab-navigator/使用的是物质社区图标。如何将其更改为https://mui.com/material-ui/material-icons/？中列出的图标如有任何帮助，我们不胜感激。非常感谢。


import { StyleSheet, Text, View } from "react-native";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

const Tab = createMaterialBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Settings!</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Trips"
          component={HomeScreen}

// Here is the error
          options={{
            tabBarLabel: "Trips",
            tabBarIcon: ({ color }) => <MaterialCommunityIcons name="travel-explore" color={color} size={26} />,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

更多回答
优秀答案推荐
更多回答

32 4 0
文章推荐： Styles are not going into effect(样式不会生效)
文章推荐： CustomView (surfaceview) does not match screen dimension (dynamically)(CustomView(Surface Eview)与屏幕尺寸(动态)不匹配)
文章推荐： How can I change html audio music in React?(如何在Reaction中更改html音频音乐？)
文章推荐： Gatsby error, I am getting the 404 page with error saying that there is no page at this URL until I refresh the page again(Gatsby错误，我正在获取404页面，错误是说在我再次刷新页面之前，此URL上没有页面)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com