Question

我正在使用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")

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

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

Answer 1

要从抽屉中隐藏菜单项，请在自定义抽屉内容中使用Array.map（...）而不是。

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

，而不是，请使用，如下所示。

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

反应naviagation v5从抽屉自定义视图导航

1 个答案: