用于导航的tabBarIcon中的自定义图像

Question

这里是我想要用自定义图像替换的带有导航栏图标的代码。我怎样才能做到这一点？

function Main() {
const {globalState, dispatch} = useContext(store);
return (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({focused}) => (
<Icon
name={'home'}
style={{
fontSize: 24,
color: focused ? 'dodgerblue' : 'lightgray',
}}
/>
),
}}
/>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarIcon: ({focused}) => (
<Icon
name={'rss'}
style={{
fontSize: 24,
color: focused ? 'dodgerblue' : 'lightgray',
}}
/>
),
}}
/>
<Tab.Screen
name="Random"
component={Random}
options={{
tabBarIcon: ({focused}) => (
<Icon
name={'alpha-r-circle-outline'}
style={{
fontSize: 24,
color: focused ? 'dodgerblue' : 'lightgray',
}}
/>
),
}}
/>
<Tab.Screen
name="Chat"
component={globalState.user ? MessageCenter : Login}
options={{
tabBarIcon: ({focused}) => (
<Icon
name={'chat'}
style={{
fontSize: 24,
color: focused ? 'dodgerblue' : 'lightgray',
}}
/>
),
}}
/>
<Tab.Screen
name="Settings"
component={globalState.user ? Setting : Login}
options={{
tabBarIcon: ({focused}) => (
<Icon
name={'account'}
style={{
fontSize: 24,
color: focused ? 'dodgerblue' : 'lightgray',
}}
/>
),
}}
/>
</Tab.Navigator>
);
}

我所尝试的是我替换了这个块：

options={{
tabBarIcon: ({focused}) => (
<Icon
name={'home'}
style={{
fontSize: 24,
color: focused ? 'dodgerblue' : 'lightgray',
}}
/>
),
}}

有了这个：

<Image
source={
focused
? require('../../images/home_active_icon.png')
: require('../../images/home_inactive_icon.png')
}
resizeMode={'contain'}
style={{
width: 24,
height: 24,
}}
/>

但它不起作用。请帮忙。

Answer 1

***Follow the my code..***       
<Tab.Navigator
screenOptions={({ route, }) => ({
tabBarIcon: ({ tintColor, image, focused }) => {
if (route.name == 'Home') {
image = focused ? require('../../Images/home_active_icon.png') : require('../../Images/home_inactive_icon.png')
}
if (route.name == 'Test') {
image = focused ? require('../../Images/test_active_icon.png') : require('../../Images/test_inactive_icon.png')
}
if (route.name == 'Notification') {
image = focused ? require('../../Images/Notification_active_icon.png') : require('../../Images/Notification_inactive_icon.png')
}
if (route.name == 'Profile') {
image = focused ? require('../../Images/Profile_active_icon.png') : require('../../Images/Profile_inactive_icon.png')
}

}
return (
<Image
source={image}
style={{
width: 22, height: 22,
}}
/>
)
}
})}
}}>

Answer 2

**Follow the my code..**
<Tab.Navigator
screenOptions={({ route, }) => ({
tabBarIcon: ({ tintColor, image, focused }) => {
if (route.name == 'Home') {
image = focused ? require('../../Images/home_active_icon.png') : require('../../Images/home_inactive_icon.png')
}
}
return (
<Image
source={image}
style={{
width: 22, height: 22,
}}
/>
)
}
})}
}}>