TabNavigator: style shortcut based on target framework
I am using react -native TabNavigator to navigate between tabs in my application.
const TabNav = TabNavigator({
Home: {
screen: HomeScene,
navigationOptions:{
tabBar: {
label: 'Home',
icon: ({ focused }) => {
let imgSource = focused
? require('../common/img/selected-home-75.png')
: require('../common/img/unselected-home-75.png');
return <Image
source={imgSource}
style={tabBarStyles.icon}
/>
}
}
}
},
...
}, {
swipeEnabled: false,
tabBarOptions: {
showIcon: true,
upperCaseLabel: false,
labelStyle: tabBarStyles.labelStyle,
style: tabBarStyles.style
}
});
Each tab contains an icon and a label. I would like to pat the TabBar a little depending on whether the app is running on iOS or Android.
the documentation for "tabNavigationConfig" describes two sections "tabBarOptions" for "TabBarBottom" and "TabBarTop", which makes me think it is possible to provide configuration for the top TabBar and another for the bottom TabBar.
Is it possible to provide "tabBarOptions" for iOS and different options for Android (ie top and bottom)?
+3
source to share
1 answer
It is possible to apply platform-based options using:
import {Platform} from 'react-native';
Thus, you can assign separate parameters for each platform based on the value Platform.OS
:
const iosTabBarOptions = {
showIcon: false,
upperCaseLabel: false,
labelStyle: tabBarStyles.labelStyle,
style: tabBarStyles.style
};
const androidTabBarOptions = {
showIcon: true,
upperCaseLabel: true,
labelStyle: tabBarStyles.labelStyle,
style: tabBarStyles.style
};
tabBarOptions: Platform.OS === 'ios'
? iosTabBarOptions
: androidTabBarOptions
+3
source to share