如何在 DrawerNavigator 中有条件地显示drawerLabel答案

【问题标题】：How to conditionally display drawerLabel within a DrawerNavigator如何在 DrawerNavigator 中有条件地显示drawerLabel
【发布时间】：2018-06-07 13:52:37
【问题描述】：

我最近在应用中添加了一个新屏幕，该屏幕只需要特定类型的登录用户才能访问。

class DemoScreen extends Component {
  static navigationOptions = {
    title: 'Title',
    drawerLabel: ({ tintColor, focused }) => {
      return (
        <MainMenuItem
          textKey={TEXTKEY}
          iconName="cellphone-settings"
          focused={focused}
          tintColor={tintColor}
        />
      );
    }
  };
// Skipping rest of the code
}

此组件连接到 redux 存储，因此它可以访问用户信息。但是this.props.<FIELD>不能在navigationOptions里面访问。

我的路线是这样的

const MainMenu = DrawerNavigator(
  {
    // Other screens here
    Demo: { screen: DemoScreen },
  },
  {
    drawerWidth: 250,
    drawerPosition: 'left',
    contentComponent: MenuDrawerContent,
    contentOptions: drawerContentOptions
  }
);

export const Routes = {
  // Other routes here
  Main: {
    screen: MainMenu,
    navigationOptions: {
      gesturesEnabled: false
    }
  }
};

我想要的是仅向特定类型的登录用户显示 DemoScreen MainManuItem。我该如何做到这一点？这个逻辑应该在哪里？

谢谢。

【问题讨论】：

标签： reactjs react-native redux react-navigation

【解决方案1】：

我设法通过将navigationOptions 从屏幕移动到路线来解决这个问题。现在是这样的

const MainMenu = DrawerNavigator(
  {
    // Other screens here
    Demo: { 
      screen: DemoScreen,
      navigationOptions: {
        title: 'Title',
        drawerLabel: ({ tintColor, focused }) => {
          const id = store.getState().field;
          const valid = [1234, 2345];
          if (!valid.includes(id)) {
            return null;
          }

          return (
            <MainMenuItem
              textKey={TEXT}
              iconName="cellphone-settings"
              focused={focused}
              tintColor={tintColor}
           />
          );
        }
      }
    },
  },
  {
    drawerWidth: 250,
    drawerPosition: 'left',
    contentComponent: MenuDrawerContent,
    contentOptions: drawerContentOptions
  }
);

export const Routes = {
  // Other routes here
  Main: {
    screen: MainMenu,
    navigationOptions: {
      gesturesEnabled: false
    }
  }
};

我不确定这是否是最好的方法，但它确实有效。

我确实有一些我不知道如何解决的 eslint 警告。它们是：

1. component definition is missing display name

2. 'focused' and 'tintColor' is missing in props validation

两个警告都在这一行：drawerLabel: ({ tintColor, focused }) => {。目前我已经忽略了它们，但是有人知道如何针对这种情况解决它们吗？

【讨论】：

【解决方案2】：

将 componentWillMount 函数（接收道具）添加到您的 DemoScreen。在该函数中，从 props 读取，然后根据用户的类型，您可以在对象的状态下创建您的 navigationOptions。您仍然可以将“gesturesEnabled”传递给组件 - 它也会作为道具进入 componentWillMount 函数。

【讨论】：

componentWillMount 在安装之前被调用。要进行安装，我必须单击菜单项本身。我不想那样做。我希望我的菜单项对特定类型的用户不可见。