Как изменить MaterialCommunityIcons на свой собственный значок React Native // ​​TabNavigator - PullRequest
Новая
       28

Как изменить MaterialCommunityIcons на свой собственный значок React Native // ​​TabNavigator

0 голосов
/ 18 марта 2020

Я новичок в реакции на язык, и я хотел бы использовать свой собственный значок:

(assets / user.png)

Просто обменяю MaterialCommunityIcons на мои собственные. React 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>

1 Ответ

0 голосов
/ 18 марта 2020

просто замените компонент возврата из функции значка вкладки компонентом изображения с вашим активом как sr c, как 


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