TabNavigator的/终极版与动态路由CONFIGS(TabNavigator / redux

我正在开发一个底部标签导航仪一个反应 - 本机应用程序，并想导航选项取决于在屏幕上显示，这样的：

AppNavigator.js：

class AppNavigator extends React.Component{
    isRouteEnabled = (routeName) => {
        return this.props.route == routeName;
    }

    render() {
        const tabNavigator = createBottomTabNavigator({
            Home: HomeScreen,
            Screen2: Screen2,
            // tab to be conditionally displayed
            ...(this.isRouteEnabled('Screen3') ? { Screen3 : Screen3} : {})
        });

        const AppNavigator = createAppContainer(tabNavigator);
        return <AppNavigator />
    }
}

我遇到的问题是这个类中访问this.props，目前它总是不确定的。如果可能的话，我想它使用值从我的终极版店，但是如果我换AppNavigator在connect（）调用使其成为更高级别的组件导航不再在所有工作（原因我不明白）：

const mapStateToProps = (state) => ({ route: state.route })
export default connect(mapStateToProps)(AppNavigator);

App.js很简单：

export default class App extends React.Component {
    render() {
        return (
            <Provider store={appStore}>
                <AppNavigator />
            </Provider>
        );
    }
}

我缺少的东西 - 这可能有一个与依赖于存储在Redux的值动态行为导航？

阵营导航的当前版本有一个静态配置的API，这意味着所有的配置都必须在外部进行渲染。这使得使用案例，如直到阵营导航4不可能的动态导航。

反应导航5具有一个新的基于组件的API来配置导航器，这使得动态导航可能：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function AppNavigator() {
  const isRouteEnabled = (routeName) => {
    return this.props.route == routeName;
  }

  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Screen2" component={Screen2} />
      {isRouteEnabled('Screen3') && (
        <Tab.Screen name="Screen3" component={Screen3} />
      )}
    </Tab.Navigator>
  );
}

const mapStateToProps = (state) => ({ route: state.route });

export default connect(mapStateToProps)(AppNavigator);

文档： https://reactnavigation.org/next

请记住，阵营导航5仍然在阿尔法。