Как условно отобразить drawerLabel в DrawerNavigator
Недавно я добавил в приложение новый экран, и этот экран должен быть доступен только определенным пользователям, которые вошли в систему.
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 только для определенного типа вошедшего в систему пользователя. Как мне этого добиться? Где должна находиться эта логика?
Спасибо.
Ответы 2
Добавьте функцию componentWillMount (которая получает реквизиты) в свой DemoScreen. В этой функции считайте из props, а затем, в зависимости от типа пользователя, вы можете вместо этого создать свои navigationOptions в состоянии объекта. Вы все равно можете передать параметр "gesturesEnabled" в компонент - он также войдет в качестве реквизита в функцию componentWillMount.
Мне удалось решить эту проблему, переместив 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 }) => {. На данный момент я их проигнорировал, но знает ли кто-нибудь, как их исправить в этом случае?
componentWillMountвызывается перед монтированием. Чтобы выполнить монтаж, мне нужно щелкнуть по самому пункту меню. Я не хочу этого делать. Я хочу, чтобы мой пункт меню не был виден для определенных типов пользователей.