在React-Navigation中为Tabnavigator设置backgroundColor和Badge

时间:2017-03-01 21:12:49

标签: react-native badge tabnavigator react-navigation

React-Native with React-Navigation我有一个像这样的Tabnavigator:

const testScreenNavigator = TabNavigator({
    Tab1: { screen: Tab1Screen },
    Tab2: { screen: Tab2Screen },
    Tab3: { screen: Tab3Screen },
});
testScreenNavigator.navigationOptions = {
    title: 'MY TITLE',
    header: {
        titleStyle:{
        },
        style:{
// how to set the options?
        },
    }  
}

现在我想做两件事:

  1. 设置backgroundColor:' red' Android中的选项卡(不是iOS底部选项卡)
  2. 在Tab1旁边有一个徽章:例如
  3. Tab1(2)| Tab2 | TAB3

    此致

1 个答案:

答案 0 :(得分:14)

  • 设置标题和标签
  • 的backgroundColor

要设置标题使用navigationOptions的背景颜色,并为标签使用tabBarOptions设置背景颜色。见下面的代码

const testScreenNavigator = TabNavigator ({
  Tab1: { screen: RecentChatsScreen },
  Tab2: { screen: AllContactsScreen },
  Tab3: { screen: AllContactsScreen}
}, {
  tabBarOptions : {
    style: {
      backgroundColor: '#42a5f5',
    }
  }
});

testScreenNavigator.navigationOptions = {
  title: 'MY TITLE',
  header: {
    style: {
      backgroundColor: '#42a5f5',
    }
  },
};

以下是输出

enter image description here