React native 反应本机禁用StackNavigator和DroperNavigator

我正试图根据用户访问级别禁用我的应用程序的一些菜单

以下是我的导航器：

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} />
    }
  }
});

const-MainStackNavigator=createStackNavigator({
家，
公司：{
屏幕：CompanyDetails，
导航选项：{
标题：“公司详细信息”
}
},
租户：{
屏幕：租户，
导航选项：{
标题：“租户”
}
}
}, {
defaultNavigationOptions:（{navigation}）=>{
返回{
左校长：(
navigation.openDrawer（）}
name=“md菜单”
大小={30}
/>
)
};
}
});
const AppDrawerNavigator=createDrawerNavigator({
myApp：{
屏幕：MainStackNavigator
},
主页：{
屏幕：主页，
导航选项：{
付款人：
}
},
公司：{
屏幕：CompanyDetails，
导航选项：{
付款人：
}
},
租户：{
屏幕：租户详细信息，
导航选项：{
付款人：
}
},
注销：{
屏幕：登录，
导航选项：{
标题：“注销”，
付款人：
}
}
});

如果userAccessLevel不是1，我想禁用公司菜单（显示但不可单击）。我可以通过身份验证获取userAccessLevel:

AsyncStorage.getItem（'UserLevel'）

可能吗

---

谢谢

您可以使用CustomDrawerNavigation

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,
  });

const-AppDrawerNavigator=createDrawerNavigator({
myApp：{
屏幕：MainStackNavigator
},
主页：{
屏幕：主页，
导航选项：{
付款人：
}
},
公司：{
屏幕：CompanyDetails，
导航选项：{
付款人：
}
},
租户：{
屏幕：租户详细信息，
导航选项：{
付款人：
}
},
注销：{
屏幕：登录，
导航选项：{
标题：“注销”，
付款人：
}
}
}, {
抽屉位置：'左'，
抽屉类型：“幻灯片”，
contentComponent:CustomDrawerNavigation，
抽屉背景颜色：“#091b40”，
DropeRopenRoute:“DropeRopen”，
抽屉关闭路线：“抽屉关闭”，
DroperTogglerOute:“DroperToggle”，
抽屉宽度：（宽度/3）*2，
});

类CustomDrawerNavigation扩展了React.Component{
render（）{
返回(
{data.map（（每个，索引）=>{
if（each.name==‘Company’&&level！==1）{
返回；
}
返回(
this.props.navigation.navigate（each.route）}>
{翻译（每个.name）}
);
});
}
)};
}

---

希望这对您有所帮助

您应该修改customdrawernavigation组件这是否回答了您的问题？

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

  )};
}