React Native Navigation 5 - 如何为每个底部选项卡设置颜色 [英] React Native Navigation 5 - How to set a color for each bottom tab

问题描述

我正在尝试为 RNN 5 上的每个底部选项卡设置不同的颜色.

I'm trying to setup a different color for each bottom tab on RNN 5.

const MyTab = createBottomTabNavigator();
    
<MyTab.Navigator>
  <MyTab.Screen
    name='ToTimerScreen'
    component={TimerScreen}
    options={({ route }) => ({
      tabBarLabel: 'Timer',
      tabBarIcon: () => TimerIcon(),
    })}
  />
  <MyTab.Screen
    name='ToJournalScreen'
    component={JournalScreen}
    options={{
      tabBarLabel: 'Journal',
      tabBarIcon: () => JournalIcon(),
    }}
  />
</MyTab.Navigator>

例如一蓝一红.我尝试了所有可能的选择，但没有办法.有人知道怎么做吗?谢谢！

for example one blue and one red. I tried every possible option but no way. Someone knows how to? Thanks!

推荐答案

找到了！只需使用 Material Bottom Tab Navigator

Found it! Just use Material Bottom Tab Navigator

import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
    
const MyTab = createMaterialBottomTabNavigator();

使用 tabBarColor: '#color'

<MyTab.Screen
  name='ToJournalScreen'
  component={JournalScreen}
  options={{
    tabBarColor: Colors.Journal, // this gives the color
    tabBarLabel: 'Journal',
    tabBarIcon: () => <Icon name={'md-book'} color={'red'} size={20} />,
  }}
/>

适用于 Android 和 iOS.

Works in Android and iOS.

这篇关于React Native Navigation 5 - 如何为每个底部选项卡设置颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！