React Navigation 5 隐藏抽屉项目 [英] React Navigation 5 Hide Drawer Item
本文介绍了React Navigation 5 隐藏抽屉项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图隐藏在抽屉导航器中按下我的一个路线的能力，因为它是另一个导航器和应用程序中的默认位置.我希望抽屉仅用于导航到不适合其他地方的用户流程的无关路线.在 React Navigation 5 之前，我可以通过简单地设置 drawerLabel: () =>空.但是现在有了这些变化，我无法弄清楚如何以同样的方式隐藏它.
I am trying to hide the ability to press one of my routes in the drawer navigator as it is another navigator and the default location in the app. I want the drawer to simply be used for navigating to extraneous routes that don't fit well into user flow elsewhere. Before React Navigation 5 I was able to achieve this by simply setting drawerLabel: () => null. However now with the changes I cannot figure out how to hide this in the same manner.
以下是我当前的导航代码:
Below is my current navigator code:
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>
)
}
链接到显示不需要的输出的图像.基本上我想要蓝色焦点和整个导航项目专门从导航栏隐藏.不需要的输出
Link to image showing the undesired output. Basically I want the blue focus and entire nav item hidden from the naw bar specifically. UNDESIRED Output
推荐答案
解决了以下问题
import React from 'react';
import { SafeAreaView, View, Text, StyleSheet, Image, Linking } from 'react-native';
import { EvilIcons, AntDesign } from '@expo/vector-icons';
import { useDispatch } from 'react-redux';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import MainTabNavigator from './MainTabNavigator';
import FAQStackNavigator from './FAQStackNavigator';
import { TouchableOpacity } from 'react-native-gesture-handler';
import * as authActions from '../store/actions/auth';
import { moderateScale } from '../utils/fontScale';
const MainDrawerNavigator = createDrawerNavigator();
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) => {
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('...')}
/>
</View>
<TouchableOpacity style={styles.contactUsContainer} onPress={() => { Linking.openURL('...')}}>
<AntDesign style={styles.iconStyle} name={'shoppingcart'} size={25} color={'black'} />
<Text style={styles.drawerText}>Shop</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.contactUsContainer} onPress={() => { Linking.openURL('...')}}>
<AntDesign style={styles.iconStyle} name={'contacts'} size={25} color={'black'} />
<Text style={styles.drawerText}>Contact Us</Text>
</TouchableOpacity>
{/* Tried just disabling using DrawerItemList but wasn't working so made
complete custom drawer component and navigate properly using props.navigation.navigate */}
{/* <DrawerItemList
{...props}
/> */}
<TouchableOpacity
style={styles.contactUsContainer}
onPress={() => { console.log(props.navigation.navigate('FAQNav'))}}
>
<EvilIcons name={'question'} size={30} color={'black'} />
<Text style={styles.drawerText}>FAQ</Text>
</TouchableOpacity>
</DrawerContentScrollView>
</View>
<TouchableOpacity
style={styles.logoutContainer}
onPress={() => {
dispatch(authActions.logout());
}}>
<Text style={styles.logoutText}>SIGN OUT</Text>
</TouchableOpacity>
</View>
)
}
const drawerStyle = {
activeTintColor: 'black',
inactiveTintColor: 'black',
labelStyle: {
fontFamily: 'montserrat',
marginVertical: 16,
marginHorizontal: 0,
},
iconContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
},
itemStyle: {
}
}
const styles = StyleSheet.create({
safeArea: {
flex: 1,
paddingTop: Platform.OS === 'android' ? 25 : 0
},
container: {
flex: 1,
},
logoContainer: {
width: '100%',
height: moderateScale(50),
alignItems: 'center',
justifyContent: 'center',
marginBottom: 5,
padding: 5,
},
image: {
resizeMode: 'contain',
width: '80%',
height: '100%',
},
contactUsContainer: {
flexDirection: 'row',
width: '100%',
height: 50,
alignItems: 'center',
paddingLeft: 15
},
logoutContainer: {
flexDirection: 'row',
width: '100%',
height: 50,
alignItems: 'flex-end',
justifyContent: 'center',
},
drawerText: {
fontFamily: 'montserrat',
marginLeft: 16,
},
logoutText: {
fontFamily: 'montserrat',
color: '#b23b3b'
}
});
export default DrawerNavigator;
这篇关于React Navigation 5 隐藏抽屉项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
