反应导航4 MaterialTopTabNavigator - activeLabelStyle

Question

我正在创建一个带有ReactiveNavigationv4的MaterialTopBar。我所面临的问题是，我无法将样式设置为标签的活动状态--甚至是标签标签。

docs声明您可以提供一个呈现自定义标签的函数。在这里，您可以提供基于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>;
        }
      };
    }
 })

提前感谢！

Answer 1

我在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直接传递到屏幕上，而不是把它传递给所有的选项卡。~褪色