Реагируйте на собственное отключение StackNavigator и DrawerNavigator - PullRequest
Новая
       7

Реагируйте на собственное отключение StackNavigator и DrawerNavigator

0 голосов
/ 31 января 2020

Я пытаюсь отключить некоторые меню моего приложения в соответствии с уровнем доступа пользователя.

Вот мои навигаторы: 

const MainStackNavigator = createStackNavigator({
    Home,
    Company: {
      screen: CompanyDetails,
      navigationOptions: {
        headerTitle: 'Company Details'
      }
    },
    Tenants: {
      screen: Tenants,
      navigationOptions: {
        headerTitle: 'Tenants'
      }
    }
}, {
  defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Ionicons
            style={{ paddingLeft: 10 }}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        )
      };
    }
});

const AppDrawerNavigator = createDrawerNavigator({
  myApp: {
    screen: MainStackNavigator
  },
  Home: {
    screen: Home,
    navigationOptions: {
      drawerIcon: <FontAwesome name="home" size={20} />
    }
  },
  Company: {
    screen: CompanyDetails,
    navigationOptions: {
      drawerIcon: <FontAwesome name="building-o" size={20} />
    }
  },
  Tenants: {
    screen: TenantDetails,
    navigationOptions: {
      drawerIcon: <Ionicons name="ios-person" size={20} />
    }
  },
  LogOut: {
    screen: Login,
    navigationOptions: {
      title: 'Log Out',
      drawerIcon: <Entypo name="log-out" size={20} />
    }
  }
});

Я хочу отключить компанию меню (показывается, но не активируется), если userAccessLevel не равен 1. Я могу получить userAccessLevel из моей аутентификации: AsyncStorage.getItem('UserLevel')

Возможно ли это?

Спасибо

1 Ответ

0 голосов
/ 31 января 2020

Это возможно, Вы можете использовать customdrawernaivgation. 

const AppDrawerNavigator = createDrawerNavigator({
  myApp: {
    screen: MainStackNavigator
  },
  Home: {
    screen: Home,
    navigationOptions: {
      drawerIcon: <FontAwesome name="home" size={20} />
    }
  },
  Company: {
    screen: CompanyDetails,
    navigationOptions: {
      drawerIcon: <FontAwesome name="building-o" size={20} />
    }
  },
  Tenants: {
    screen: TenantDetails,
    navigationOptions: {
      drawerIcon: <Ionicons name="ios-person" size={20} />
    }
  },
  LogOut: {
    screen: Login,
    navigationOptions: {
      title: 'Log Out',
      drawerIcon: <Entypo name="log-out" size={20} />
    }
  }
}, {
    drawerPosition: 'left',
    drawerType: 'slide',
    contentComponent: CustomDrawerNavigation,
    drawerBackgroundColor: '#091b40',
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
    drawerWidth: (width / 3) * 2,
  });

class CustomDrawerNavigation extends React.Component {
render() {
 return (
     <SafeAreaView>
       <ScrollView>
          {data.map((each, index) => {
                if(each.name === 'Company' && level !== 1) {
                     return <View/>;
                 }
                return (
                  <TouchableOpacity
                    key={each.name}
                    onPress={() => this.props.navigation.navigate(each.route)}>
                    <View style={styles.menuContainer}>
                      <Icon style={styles.iconStyle} name={each.icon} />
                      <Text style={styles.textStyle}>{translate(each.name)}</Text>
                    </View>
                  </TouchableOpacity>
            );
            });
          }

  )};
}

Надеюсь, это поможет вам

...