My app’s bottom tabs work fine using classic build service. But it becomes only one image appearing to all the other tabs which it shouldn’t after I switch to eas build.
This situation didn’t appear on iOS or development build but only android’s preview and production build. And I can’t find any solution right now, please help.
here is my code defining tab bar icons:
<Tab.Navigator
initialRouteName=“Home”
screenOptions={({route}) => ({
tabBarIcon: ({focused}) => {
let iconPath;
if (route.name === ‘Home’) {
iconPath = focused ? require(‘…/HomeNavigator/icon/tabIcon/大盤指數-blue.png’): require(‘…/HomeNavigator/icon/tabIcon/大盤指數-gray.png’);
}
if (route.name === ‘Market’) {
iconPath = focused ? require(‘…/HomeNavigator/icon/tabIcon/市場資訊-blue.png’): require(‘…/HomeNavigator/icon/tabIcon/市場資訊-gray.png’);
}
if (route.name === ‘Stock’){
iconPath = focused ? require(‘…/HomeNavigator/icon/tabIcon/個股資訊-blue.png’): require(‘…/HomeNavigator/icon/tabIcon/個股資訊-gray.png’);
}
if (route.name === ‘Calendar’){
iconPath = focused ? require(‘…/HomeNavigator/icon/tabIcon/行事曆-blue.png’): require(‘…/HomeNavigator/icon/tabIcon/行事曆-gray.png’);
}
if (route.name === ‘MyStock’){
iconPath = focused ? require(‘…/HomeNavigator/icon/tabIcon/我的個股-blue.png’): require(‘…/HomeNavigator/icon/tabIcon/我的個股-gray.png’);
}
if (route.name === ‘MENU’){
return ‘’
}
return <Image
source={iconPath}
fadeDuration={0}
style={{
resizeMode:'contain',
// height:30,
height:'55%',
marginTop: 'auto',
marginBottom: 'auto'
}}
/>;
},
})}
tabBarOptions={{
activeTintColor: '#09629C',
inactiveTintColor: '#7D7C7C',
labelStyle: {
fontSize: windowWidth<400? 12: (windowWidth<700? 12.5: 18),
paddingLeft:windowWidth>700? 8 : 0,
},
style: {
// height: '10%',
height: windowWidth<400? 80: '10%',
paddingBottom:20,
width: '100%',
},
labelPosition:windowWidth>700? 'beside-icon':'below-icon',
}}
>
you can see tab bar icon repeating below: