Question

我最近在应用中添加了一个新屏幕，此屏幕只能由登录的特定用户访问。

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显示给特定类型的登录用户。我该如何做到这一点？这个逻辑应该放在哪里？

感谢。

Answer 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
    }
  }
};

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

我确实有一些警告，我不知道如何解决。那些是：

1. component definition is missing display name

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

这两条警告都在这一行：drawerLabel: ({ tintColor, focused }) => {。目前我忽略了他们，但有人知道如何解决这个问题吗？

Answer 2

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

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

2 个答案: