选择和未选择状态的反应导航中的不同tabBar图标？

Posted 2023-03-15

【中文标题】选择和未选择状态的反应导航中的不同tabBar图标？

【英文标题】：Different tabBar icons in react navigation for selected and unselected state?

【发布时间】：2017-06-21 06:24:45

【问题描述】：

我正在使用 react native 中的 react 导航设置标签栏。我无法为选中/未选中状态设置多个标签栏图标。任何参考或文档都会有所帮助？

【参考方案1】：

tabBarIcon 回调为您提供 focused 变量。

static navigationOptions = 
    tabBarLabel: 'Home',
    tabBarIcon: ( focused ) => 
        const image = focused 
        ? require('../active.png') 
        : require('../inactive.png')
        return (
            <Image 
                source=image
                style=styles.tabIcon
            />
        )
    

【参考方案2】：

您可以根据activeTintColor / inactiveTintColor更改图标

static navigationOptions = 
    tabBarLabel: 'Notifications',
    tabBarIcon: ( tintColor ) => (tintColor == '#e91e63' ?
      <Image
        source=require('./activeIcon.png')
        style=[styles.icon, tintColor: tintColor]
      />
      :
      <Image
        source=require('./inactiveIcon.png')
        style=[styles.icon, tintColor: tintColor]
      />
    ),
    tabBarOptions: 
        activeTintColor: '#e91e63',
    

;

即使你不使用 tint 颜色，你也可以这样做。