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

Question

我是react native的初学者，我想使用我自己的图标：

(assets/user.png(

只要把MaterialCommunityCons换成我自己的。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>

Answer 1

只需将选项卡图标函数中的返回组件替换为图像组件，即可将您的资产替换为类似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>