Как условно отобразить в папке «Вешка» в DrawerNavigator - PullRequest
Новая
       20

Как условно отобразить в папке «Вешка» в DrawerNavigator

0 голосов
/ 07 июня 2018

Недавно я добавил новый экран в приложение, и к нему должны обращаться только пользователи определенного типа, вошедшие в систему. 

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
}

Этот компонент подключен к хранилищу резервов, поэтому онимеет доступ к информации пользователей.Но 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 только для определенного типа вошедшего в систему пользователя,Как мне это сделать?Где должна находиться эта логика?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Мне удалось решить эту проблему, переместив 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 }) => {.На данный момент я их проигнорировал, но кто-то знает, как их исправить для этого случая?

0 голосов
/ 07 июня 2018

Добавьте функцию componentWillMount (которая получает реквизиты) на ваш DemoScreen.В этой функции, чтение из реквизита, а затем, в зависимости от типа пользователя, вы можете вместо этого создать ваши NavigationOptions в состоянии объекта.Вы можете передать "gesturesEnabled" в компонент по-прежнему - он также будет добавлен в качестве компонента в функцию componentWillMount.

...