时间戳

首页 > 解决方案 > 反应导航 4 MaterialTopTabNavigator - activeLabelStyle

reactjs - 反应导航 4 MaterialTopTabNavigator - activeLabelStyle

问题描述

我正在使用 React Navigation v4 创建一个 MaterialTopBar。我面临一个问题，我无法将样式设置为标签的活动状态 - 甚至是选项卡。

文档声明您可以提供一个呈现自定义标签的函数。在这里，您可以根据focused参数提供自定义样式。这就是我正在做的，但它似乎只是忽略了我的自定义标签功能。下面是我的代码。

export default createMaterialTopTabNavigator(
 {
    Drinks: {
      screen: PickupDrinksScreen,
    },
    Food: {
      screen: PickupFoodScreen,
    },
    Snacks: {
      screen: PickupSnacksScreen,
    }
  },
 {
    navigationOptions: ({ navigation }) => {
      return {
        tabBarLabel: ({ focused }) => {
          const { routeName } = navigation.state;
          return <Text style={[styles.label, focused && styles.focusedLabel]}>{routeName}</Text>;
        }
      };
    }
 })

提前致谢！

标签： reactjsreact-nativereact-navigation

解决方案

我设法在 BottomTabNavigator 中实现了这一点，但我认为它并没有真正满足您的需求。查看我的代码：

  Secure: {
    screen: SecureStack,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        if (focused) {
          return <Ionicons name="md-unlock" size={24} color="#ccc" />;
        } else {
          return <Ionicons name="md-lock" size={24} color="#ccc" />;
        }
      },
      title: "Secure"
    }
  }

像我一样尝试，我将 navigationOptions 传递给屏幕，而不是传递给所有选项卡。~ 褪色

推荐阅读