React Native Navigation 5 - 如何为每个底部选项卡设置颜色

Question

我正在尝试为 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>

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

Answer 1

找到了！ 只需使用 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。

Answer 2

您可以将颜色道具传递给图标组件

import Icon from "react-native-vector-icons/Ionicons";

const MyTab = createBottomTabNavigator();

<MyTab.Navigator>
  <MyTab.Screen
        name="ToTimerScreen"
        component={TimerScreen}
        options={({route}) => ({
          tabBarLabel: 'Timer',
          tabBarIcon: ({focused}) => <Icon name={'iconName'} color={'blue'} size={24}/>,
        })}
      />
      <MyTab.Screen
        name="ToJournalScreen"
        component={JournalScreen}
        options={{
          tabBarLabel: 'Journal',
          tabBarIcon: () => <Icon name={'iconName'} color={'red'} size={24}/>,
        }}
      />
    </MyTab.Navigator>