react-native - 通过带有NavigationOptions的React Navigation中的状态更改底部标签栏

Question

我想根据启用的功能来更改屏幕底部的选项卡。此功能列表是通过登录API调用填充的。

目前，我有以下内容:

const TabRouteConfig = {
  Home: DashboardScreen,
  FeatureA: FeatureA,
  FeatureZ: FeatureZ,
};

const TabNavigatorConfig = {
  initialRouteName: 'Home',
  order: [
    'Home',
    'Feature A',
  ],
  tabBarPosition: 'bottom',
  lazy: true,
};

const TabNavigator1 = createBottomTabNavigator(
  TabRouteConfig,
  TabNavigatorConfig,
);

// Set the tab header title from selected route
// https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header
TabNavigator1.navigationOptions = ({ navigation }) => {
  const { index, routes } = navigation.state;
  const { routeName } = routes[index];

  return {
    headerTitle: routeName,
  };
};

const TabNavigator2 = createBottomTabNavigator(
  TabRouteConfig,
  {
   ...TabNavigatorConfig,
   order: [
      'Home',
      'Feature Z',
   ]

);

TabNavigator2.navigationOptions = TabNavigator1.navigationOptions;

const Stack = createStackNavigator({
  Main: {
    screen: props => (props.screenProps.hasFeature ?
      <TabNavigator1 /> : <TabNavigator2 />
    )
  },
})

const WrappedStack = props => (
  <View style={styles.container}>
    <Stack
      screenProps={{ hasFeature: props.hasFeature }}
    />
  </View>
);

const mapStateToProps = (state, props) => {
  return {
    ...props,
    hasFeature: state.hasFeature,
  };
};

export default connect(mapStateToProps, null)(WrappedStack);

这通常可以正常工作-它会根据 TabNavigator1在 TabNavigator2和 hasFeature之间动态切换，但是不再支持放置在TabNavigators上的 navigationOptions，并且未设置 headerTitle。

有一个更好的方法吗？

Answer 1

同时渲染多个导航器是一种反模式，因为这些导航器的导航状态将完全分离，并且您将无法导航到另一个导航器。

您可以使用tabBarComponent选项实现所需的功能。希望您可以从以下示例中获得灵感:

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabNavigator = createBottomTabNavigator(
  TabRouteConfig,
  {
    tabBarComponent: ({ navigation, ...rest }) => {
      const filteredTabNavigatorRoutes = navigation.state.routes.filter(route => isRouteAllowed(route));
      return (
        <BottomTabBar
          {...rest}
          navigation={{
            ...navigation,
            state: { ...navigation.state, routes: filteredTabNavigatorRoutes },
          }}
        />
      );
    },
  },
);

笔记:

您不必单独安装react-navigation-tabs。它随react-navigation 2.0.0+自动安装。

isRouteAllowed是根据是否显示该路线返回true或false的函数。确保仅检查该对象中的顶层路线。

TabRouteConfig应该包含所有可能的选项卡，并且此逻辑仅可视地从TabBar隐藏路由。因此，您仍然可以以编程方式导航到所有路线。因此，您可能需要在每个屏幕中使用其他逻辑来决定是否基于hasFeature呈现它们。