I'm getting started with react-navigation.
How do I change the tabBar background color when I change tab?
我开始使用react-navigation。更改标签后如何更改tabBar背景颜色?
Here is some pseudo-code showing what I'm hoping for:
这是一些伪代码,显示了我希望的内容:
_backgroundColor = function() {
switch (this.routeName) {
case 'tabHome': return { backgroundColor: '#002663' };
case 'tabRewards': return { backgroundColor: '#3F9C35' };
default: return { backgroundColor: 'white' }
}
}
// Tabs setup
export const TabStack = TabNavigator({
tabHome: { screen: HomeStack, },
tabRewards: { screen: RewardsStack, },
}, {
tabBarOptions: {
style: _backgroundColor(),
}
});
At the minute it's always defaulting to white ( which is fine because my code is wrong :-) so how do I pass in something which triggers this logic either on routeName or iconLabel or whatever.
在那一刻它总是默认为白色(这很好,因为我的代码是错误的:-)所以我如何传递一些东西,在routeName或iconLabel或其他任何东西上触发这个逻辑。
Any help would be most appreciated.
Thanks in advance.
Cheers
非常感激任何的帮助。提前致谢。干杯
1 个解决方案
#1
4
import React from 'react';
import { Image, View } from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
const Screen = () => <View />;
const Tabs = TabNavigator(
{
Tab1: {
screen: Screen,
navigationOptions: {
title: 'Tab1',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
Tab2: {
screen: Screen,
navigationOptions: {
title: 'Tab2',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
Tab3: {
screen: Screen,
navigationOptions: {
title: 'Tab3',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
},
{
lazy: true,
tabBarComponent: props => {
const backgroundColor = props.position.interpolate({
inputRange: [0, 1, 2],
outputRange: ['orange', 'white', 'green'],
})
return (
<TabBarBottom
{...props}
style={{ backgroundColor: backgroundColor }}
/>
);
},
swipeEnabled: true,
animationEnabled: true,
tabBarPosition: 'bottom',
initialRouteName: 'Tab2',
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: 'grey',
},
},
);
Output
产量
#1
4
import React from 'react';
import { Image, View } from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
const Screen = () => <View />;
const Tabs = TabNavigator(
{
Tab1: {
screen: Screen,
navigationOptions: {
title: 'Tab1',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
Tab2: {
screen: Screen,
navigationOptions: {
title: 'Tab2',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
Tab3: {
screen: Screen,
navigationOptions: {
title: 'Tab3',
tabBarIcon: ({ tintColor }) =>
(<Image
source={require('../images/iconNotificationNew.png')}
style={[{ tintColor }]}
/>),
},
},
},
{
lazy: true,
tabBarComponent: props => {
const backgroundColor = props.position.interpolate({
inputRange: [0, 1, 2],
outputRange: ['orange', 'white', 'green'],
})
return (
<TabBarBottom
{...props}
style={{ backgroundColor: backgroundColor }}
/>
);
},
swipeEnabled: true,
animationEnabled: true,
tabBarPosition: 'bottom',
initialRouteName: 'Tab2',
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: 'grey',
},
},
);
Output
产量