反应原生禁用 StackNavigator 和 DrawerNavigator

Question

我正在尝试根据用户访问级别禁用我的应用程序的某些菜单。

这是我的导航器：

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')

有可能吗？

谢谢

Answer 1

有可能，你可以使用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>
            );
            });
          }

  )};
}

希望对你有帮助