陣營導航顯示/隱藏抽屜物品

Question

陣營本地使用陣營導航 - 顯示/隱藏抽屜項目

我在想，如果你們也許有人已經來顯示或隱藏某些菜單或比這個更好的了DrawerNavigator下的抽屜項目。

基本上我有用戶角色，我想基於用戶的角色顯示/隱藏選定的菜單。

我現在的設置是我有一個DrawerNavigator嵌套在StackNavigator中。

Menu That Contains My Drawer Items

Hide some drawer items based on user role

目前正在使用：

反應版本16.0.0-alpha.12

反應，原生版本0.46.0

反應導航版本1.0.0-beta.11

Answer 1

您可以創建將呈現抽屜物品

contentComponent自己的自定義組件：CustomDrawerContentComponent

該組件可以在節目定義邏輯隱藏物品

例子裏面：

const CustomItems = ({ 
    navigation: { state, navigate }, 
    items, 
    activeItemKey, 
    activeTintColor, 
    activeBackgroundColor, 
    inactiveTintColor, 
    inactiveBackgroundColor, 
    getLabel, 
    renderIcon, 
    onItemPress, 
    style, 
    labelStyle, 
}: Props) => (
    <View style={[styles.container, style]}> 
    {items.map((route: NavigationRoute, index: number) => { 
     const focused = activeItemKey === route.key; 
     const color = focused ? activeTintColor : inactiveTintColor; 
     const backgroundColor = focused 
     ? activeBackgroundColor 
     : inactiveBackgroundColor; 
     const scene = { route, index, focused, tintColor: color }; 
     const icon = renderIcon(scene); 
     const label = getLabel(scene); 
     return (
     <TouchableOpacity 
      key={route.key} 
      onPress={() => { 
      console.log('pressed') 
      onItemPress({ route, focused }); 
      }} 
      delayPressIn={0} 
     > 
      <View style={[styles.item, { backgroundColor }]}> 
      {icon ? (
       <View style={[styles.icon, focused ? null : styles.inactiveIcon]}> 
       {icon} 
       </View> 
      ) : null} 
      {typeof label === 'string' ? (
       <Text style={[styles.label, { color }, labelStyle]}>{label}</Text> 
      ) : (
       label 
      )} 
      </View> 
     </TouchableOpacity> 
    ); 
    })} 
    </View> 
); 

因此，在上面的代碼中，您可以定義將顯示哪條路線，例如，您可以使用商品列表顯示或隱藏商店在這裏你可以做比較。

希望它可以幫助