如何将MaterialCommunityIcons更改为我自己的图标React Native // TabNavigator

2024-06-01 • 问答

我是React Native的初学者，我想使用自己的图标：

（assets / user.png）

只需将MaterialCommunityIcons交换给我自己。反应Native 5.x

但是我不知道该怎么做...

这里的代码：

        <Tab.Navigator
                           activeColor="#3e2465"
                           inactiveColor="#8366ae"
                           barStyle={{ backgroundColor: '#f1eded' }}
            >
                <Tab.Screen name="Home"
                            component={Map}
                            options={{
                                tabBarLabel: 'Map',tabBarIcon: ({ color }) => (
                                    <MaterialCommunityIcons name="map" color={color} size={26} />
                                    ),}}
                />
                <Tab.Screen name="Login"
                            component={EventList}
                            options={{
                                tabBarLabel: 'EventList',tabBarIcon: ({ color }) => (
                                    <MaterialCommunityIcons name="cup" color={color} size={26} />
                                    ),}}
                />
                <Tab.Screen name="Logi1n"
                            component={Profile}
                            options={{
                                tabBarLabel: 'Profile',tabBarIcon: ({ color }) => (
                                    <MaterialCommunityIcons name="account-box-outline" color={color} size={26} />
                                    ),}}
                />
            </Tab.Navigator>

zgxgcgvg 回答：如何将MaterialCommunityIcons更改为我自己的图标React Native // TabNavigator

只需将标签图标功能中的返回组件替换为图像组件，并将其资产设为src之类的


        <Tab.Navigator
                           activeColor="#3e2465"
                           inactiveColor="#8366ae"
                           barStyle={{ backgroundColor: '#f1eded' }}
            >
                <Tab.Screen name="Home"
                            component={Map}
                            options={{
                                tabBarLabel: 'Map',tabBarIcon: ({ color }) => (
                                    //<MaterialCommunityIcons name="map" color={color} size={26} />
                               //just replace your material community icons with

                              <Image src={.../path/to/your/asset/file} style={{height:30,width:30}} tintColor={color}/>
                                    ),}}
                />
                ...
            </Tab.Navigator>

react-native tabnavigator

本文链接：https://www.f2er.com/2629269.html

如何将MaterialCommunityIcons更改为我自己的图标React Native // TabNavigator

zgxgcgvg 回答：如何将MaterialCommunityIcons更改为我自己的图标React Native // TabNavigator

大家都在问