时间戳

首页 > 解决方案 > 当标签处于活动状态或不在 React Native 中时更改标签栏图标

javascript - 当标签处于活动状态或不在 React Native 中时更改标签栏图标

问题描述

我在本机反应中有一个底部选项卡导航，如果选项卡处于活动状态，我希望它显示不同的图标，如果选项卡不活动，则显示另一个图标。我如何实现它？我在下面有我的代码

...
import { createBottomTabNavigator } from "react-navigation-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import HomeScreen from "../screens/HomeScreen";
...

export default createBottomTabNavigator({
 HomePage: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarLabel: "Home",
    tabBarIcon: ({ tintColor }) => (
      <MaterialCommunityIcons
        name='home'
        color={tintColor}
        size={28}
      />
    )
  }
},
....
{
 tabBarOptions: {
  showLabel: false,
  activeTintColor: 'red',
  inactiveTintColor: "grey"
}
}
})

标签： javascriptreactjsreact-native

解决方案

经过一些研究，这就是我如何做到的。首先将一个“聚焦”道具传递给 tabBarIcon，如下所示。然后进行检查以确定要呈现哪个图标

export default createBottomTabNavigator({
 HomePage: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarLabel: "Home",
    tabBarIcon: ({ tintColor, focused }) => (
      <MaterialCommunityIcons
        name={focused ? "home" : "home-outline"}
        color={tintColor}
        size={28}
      />
    )
  }
},
....
{
 tabBarOptions: {
  showLabel: false,
  activeTintColor: 'red',
  inactiveTintColor: "grey"
}
}
})

根据上面的代码，无论选项卡是否处于活动状态，不同的图标都会以淡色呈现

推荐阅读