0

我正在使用 React Navigation V5，我想要自定义抽屉导航内容，其中包含顶部的图像和其他一些导航项

这是我的抽屉里的物品：

  • 图片（自定义视图）
  • 轮廓
  • 产品
  • 订单

这是我的自定义抽屉内容的代码。

export const CustomDrawerContent = props => {
return (
    <SafeAreaView style={styles.customDrawer}>
        <View
            style={{ flex: 1 }}
        >

            <DrawerContentScrollView {...props}>
                <TouchableNativeFeedback onPress={() => { console.log('go profile');  }}>
                    <View style={styles.userContainer}>
                        <View style={styles.imageContainer}>

                            <Image
                                style={styles.image}
                                source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTLCta_MQcJFd2kpz8HwXFm-6vxVqXzRUgCOIuhs94Q32GG8EeJ' }}
                            />
                        </View>
                        <Text style={styles.name}>Nguyen van Admin</Text>
                    </View>
                </TouchableNativeFeedback>

                <DrawerItemList {...props} />
            </DrawerContentScrollView>
            <DrawerItem
                label="Đăng xuất"
                style={{
                    borderWidth: 1,
                }}
                labelStyle={{
                    color: 'black'
                }}
                icon={({ focused, color, size }) => <Ionicons
                    size={23}
                    color={color}
                    name={Platform.OS === 'android' ? 'md-exit' : 'ios-exit-outline'}

                />}
            />
        </View>

    </SafeAreaView>
);
}

因此，如果配置文件屏幕存在于抽屉中，通过单击图像我可以使用

props.navigate("profile")

但是，如果我从抽屉屏幕中删除配置文件屏幕。我无法导航到个人资料了。我如何存档导航到配置文件屏幕而不添加抽屉屏幕？

或者我可以从抽屉项目中隐藏个人资料项目吗？

4

1 回答 1

1

要从抽屉中隐藏菜单项，请在自定义抽屉内容中使用 Array.map(...) 而不是 <DrawerItemList {...props} />。

{drawerItems.map((item, index) => {
return (
  <DrawerItem
    label={item.drawerLabel}
    onPress={() => props.navigation.navigate(item.routeName)}
  />
);
})}

并为自定义抽屉内容添加一个 useEffect 挂钩，如下所示，

let [drawerItems, setDrawerItems] = useState([]);

useEffect(() => {
let drawerItemsList = [];
for (const key in props.descriptors) {
  if (props.descriptors.hasOwnProperty(key)) {
    if (!key.includes('profile')) {
      const element = props.descriptors[key];
      element.options.routeName = key.substring(0, key.indexOf('-'));
      drawerItemsList.push(element.options);
    }
  }
}
setDrawerItems(drawerItemsList);
}, []);



另一种方法。，
在自定义抽屉内容中创建一个如下所示的数组。，

const drawerItemsList = [
{
    drawerLabel: 'Products',
    drawerIcon: 'product',
    routeName: 'products',
    active: true,
},
{
    drawerLabel: 'Orders',
    drawerIcon: 'order',
    routeName: 'orders',
    active: false,
},
];

let [drawerItems, setDrawerItems] = useState(drawerItemsList);

而不是 <DrawerItemList {...props} /> 使用 <Flatlist /> 如下所示。，

<View>
<FlatList 
    data={drawerItems} 
    keyExtractor={(item)=>item.routeName.trim()} 
    renderItem={({item,index})=>(
        <DrawerItem
            label={item.drawerLabel}
            icon={({color, size}) => <Ionicons name={item.drawerIcon} color={item.active?'#1e90ff':'#ccc'} size={size} />}
            labelStyle={[item.active?{color: '#1e90ff'}:{color: '#ccc'}]}
            style={item.active?{backgroundColor: '#1e90ff20'}:null}
            onPress={() => {
              drawerItemsList.forEach((element,i) => {
                i!==index?element.active=false:element.active=true
              });
              setDrawerItems(drawerItemsList)
              props.navigation.navigate(item.routeName)
            }}
        />
    )} 
/>
</View>
于 2020-03-30T21:37:59.653 回答