在本机中更改每个选项卡的活动背景颜色

时间:2018-03-20 19:27:09

标签: reactjs react-native

是否可以为不同的标签设置不同的活动背景颜色?

这是我的代码:

import { TabNavigator, TabBarTop } from 'react-navigation'
import React from 'react'
import Icon from 'react-native-vector-icons/dist/FontAwesome';
import Home from '../home/Home.js'
import About from '../home/About.js'

var Routes = TabNavigator({
    Home: {
        screen: Home,
        navigationOptions: {
            tabBarIcon: ({focused, tintColor}) => (<Icon name='music' size={20} color={'white'}/>)
        }
    },
    About: {
        screen: About,
        navigationOptions: {
            tabBarIcon: ({focused, tintColor}) => (<Icon name='search' size={20} color={'white'}/>)
        }
    }
},{
    tabBarComponent: TabBarTop,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: true,
    tabBarOptions: {
        showIcon: true,
        showLabel: false,
        tabStyle: {
            backgroundColor: '#614971'
        }
    }
});

export default Routes;

这给出了这个:

enter image description here

这就是我想要的: https://uimovement.com/media/resource_image/Tapbar.gif

提前致谢:)

0 个答案:

没有答案