在 React Native 中根据 Redux 状态显示或不显示选项卡栏项

Question

我有一个带有 React Navigation 的 React Native 应用程序，我需要根据 Redux 状态显示或隐藏选项卡。我正在使用createBottomTabNavigator并写了这个：

function createTabNavigator(props:TabNavigatorProps){
  debugger;
  const isClient = WHAT_TO_PUT_HERE??
  const tabs = isClient
  ? {
   //something
  } 
  : {
    //something else
  } 
  return createBottomTabNavigator(
   tabs,
    {
      defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ... ,
        tabBarLabel: ...,
      }
      tabBarComponent: (props) => customTabBar(props, isClient),
      tabBarOptions: {
        ...
      },
    });
};

我的createTabNavigator作品如预期，如果我手动设置的方式isClient来true和false，虽然我需要这个从终极版状态。

我也试过connect它，并mapStateToProps以正确的状态被调用，但是它不会createTabNavigator再次调用，因此状态更改不会更新到我的视图层次结构中。

如何基于 Redux 状态添加/删除选项卡（实际上完全重新渲染，因为该选项卡还涉及整个栏的一些自定义样式/渲染）？

Answer 1

我们有相同的要求，但在反应导航中我们不能有动态选项卡，因为我们必须提前静态定义所有路由。

检查这个答案，其中我详细解释了我们如何实现它。

还提到了其他可能的方法（我们还没有这样做）。

您可能还想查看一篇更有趣的文章。