react-native - React Navigation 5 隐藏抽屉项目

Question

我试图隐藏在抽屉导航器中按下我的路线之一的能力，因为它是另一个导航器和应用程序中的默认位置。我希望抽屉仅用于导航到不适合其他地方的用户流程的无关路线。在 React Navigation 5 之前，我可以通过简单地设置 drawerLabel: () => null 来实现这一点。 .但是现在有了变化，我无法弄清楚如何以相同的方式隐藏它。

以下是我当前的导航器代码:

const DrawerNavigator = () => {
    const dispatch = useDispatch();
    return (
    <MainDrawerNavigator.Navigator 
        drawerContent={props => customDrawerContent(props, dispatch)}
        drawerStyle={drawerStyle}
    >
        <MainDrawerNavigator.Screen 
            name="DrawerNav"
            component={MainTabNavigator}
            options={{
                drawerLabel: () => null,
                title: null,
                drawerIcon: () => null
            }}
        />

        <MainDrawerNavigator.Screen
            name="FAQNav"
            component={FAQStackNavigator}
            options={
                { 
                    drawerLabel: "FAQ", 
                    drawerIcon: ({tintColor}) => <EvilIcons name={'question'} size={30} color={tintColor} />
                }
            }
        />
    </MainDrawerNavigator.Navigator>
    )
}

const customDrawerContent = (props, dispatch) => {
    console.log(props.descriptors)
    return (
        <View style={{flex: 1}}>
            <View style={{height: '90%'}}>

                <DrawerContentScrollView {...props}>
                        <View style={styles.logoContainer}>
                            <Image 
                                style={styles.image} 
                                fadeDuration={0} 
                                resizeMode={'contain'} 
                                source={require('../assets/images/spikeball-logo-horizontal.png')} 
                            />
                        </View>

                        <TouchableOpacity style={styles.contactUsContainer} onPress={() => { Linking.openURL('https://spikeball.com/')}}>
                            <AntDesign style={styles.iconStyle} name={'shoppingcart'} size={25} color={'black'} />

                            <Text style={styles.drawerText}>Shop</Text>                    
                        </TouchableOpacity>

                        <TouchableOpacity style={styles.contactUsContainer} onPress={() => { Linking.openURL('https://support.spikeball.com/')}}>
                            <AntDesign style={styles.iconStyle} name={'contacts'} size={25} color={'black'} />

                            <Text style={styles.drawerText}>Contact Us</Text>                    
                        </TouchableOpacity>

                        <DrawerItemList 
                            {...props}
                        />

                </DrawerContentScrollView>
            </View>

            <TouchableOpacity 
                style={styles.logoutContainer} 
                onPress={() => { 
                    dispatch(authActions.logout());
                }}>
                    <Text style={styles.logoutText}>SIGN OUT</Text>                    
            </TouchableOpacity>
        </View>
    )
}

链接到显示不需要的输出的图像。基本上我想要蓝色焦点和整个导航项目专门从导航栏隐藏。
UNDESIRED Output

Answer 1

最好的解决方案是过滤 Prop 在传递给 之前DrawerItemList .这只适用于 react 导航 5

//custom drawer content
export default props => {
const { state, ...rest } = props;
const newState = { ...state}  //copy from state before applying any filter. do not change original state
newState.routes = newState.routes.filter(item => item.name !== 'Login') //replace "Login' with your route name

return (
     <DrawerContentScrollView {...props}>
         <DrawerItemList state={newState} {...rest} />
    </DrawerContentScrollView>
)

}