React Native:如何在特定屏幕中禁用抽屉

Question

我一直在尝试导航，但这个问题已经解决了一段时间。如何禁用抽屉以进行屏幕"工作"。我知道那个抽屉有一个选项"手势启用"，但我试着把它放进堆栈的选项中，但它不起作用。或者无论如何，我可以在堆栈的选项中执行"gestureEnabled"？

这是我的代码：

import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItem, DrawerItemList } from '@react-navigation/drawer';
import HomeScreen from './screens/HomeScreen'
import DocumentsScreen from './screens/DocumentsScreen'
import WorkFlowScreen from './screens/WorkFlowScreen'
import AboutScreen from './screens/AboutScreen'
import ShowAccessTokenScreen from './screens/ShowAccessTokenScreen'
import LoginScreen from './screens/LoginScreen'
import Work from './screens/Work'
import { WorkHeader } from './screens/Work'
import { HomeHeader } from './screens/HomeScreen'
//------------------------Navigation-----------------------
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
//----------Drawer----------
function DrawerNavigator() {
return (
<Drawer.Navigator initialRouteName="Home" drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
</DrawerContentScrollView>
)
}}>
<Drawer.Screen name="Home" component={StackNavigator} />
<Drawer.Screen name="About" component={AboutScreen} />
<Drawer.Screen name="ShowAccessTokenScreen" component={ShowAccessTokenScreen} options={{ drawerLabel: 'Your Token', gestureEnabled: false }} />
</Drawer.Navigator>
)
}
//-----------Tabs-----------
function TabNavigator() {
return (
<Tab.Navigator tabBarOptions={{
showLabel: false,
style: {
position: 'absolute',
marginHorizontal: 20
}
}}>
<Tab.Screen name='HomeScreen' component={HomeScreen}
options={{
tabBarIcon: ({ focused }) => (
<View style={{ alignItems: 'center', }}>
<Icon name='home' style={{ color: focused ? `#e32f45` : `#748c94`, }} />
<Text style={{ color: focused ? `#e32f45` : `#748c94`, }}>HOME</Text>
</View>
),
}} />
<Tab.Screen name='DocumentsScreen' component={DocumentsScreen}
options={{
tabBarIcon: ({ focused }) => (
<View style={{ alignItems: 'center' }}>
<Icon name='folder' style={{ color: focused ? `#e32f45` : `#748c94`, }} />
<Text style={{ color: focused ? `#e32f45` : `#748c94`, }}>DOCUMENTS</Text>
</View>
),
unmountOnBlur: true,
}} />
</Tab.Navigator>
)
}
//----------Stacks----------
function StackNavigator({ navigation }) {
return (
<Stack.Navigator >
<Stack.Screen name='LoginScreen' component={LoginScreen}
options={
{
headerShown: false,
}} />
<Stack.Screen name='HomeScreen' component={TabNavigator}
options={
{
headerTitle: () => <HomeHeader navigation={navigation} />,
headerLeft: null,
}} />
<Stack.Screen name='WorkFlowScreen' component={WorkFlowScreen}
options={{ gestureEnabled: false }} />
<Stack.Screen name='ShowAccessTokenScreen' component={ShowAccessTokenScreen} />
<Stack.Screen name='Work' component={Work}
options={
{
headerTitle: () => <WorkHeader navigation={navigation} />,
headerLeft: null,
}
} />
</Stack.Navigator>
)
}
//-------------------------------------------------------------------------
const App = () => {
return (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
)
}
const styles = StyleSheet.create({
})
export default App;

我的标题

//Header---------
export function HomeHeader({ navigation }) {
return (
<View style={styles.homeHeader}>
<TouchableOpacity style={styles.headerLeft} onPress={() => navigation.openDrawer()} >
<Icon name='align-left' size={25} color='black' />
</TouchableOpacity>
<Text style={styles.homeHeaderText}>eSigns </Text>
<Icon size={25} name='address-card' color='black' />
</View >
)
}

不管怎样，我能解决这个问题吗？

Answer 1

所有的堆叠都被包裹在抽屉里。如果要在页面上阻止此操作，则应相应地更改路由。例如

您应该从StackNavigator函数中删除此字段，并将其视为一个单独的字段。

<Stack.Screen name='Work' component={Work}
options={{
headerTitle: () => <WorkHeader navigation={navigation} />,
headerLeft: null,
}} 
/>

我想这是路由的一个令人困惑的方面。将链接或可能相关的页面收集到一个堆栈中，然后组合这些堆栈。试着根据它们的用途将其分解。如果您导航到下面这个片段中的"工作"堆栈，则抽屉将无法工作。因为抽屉在另一个抽屉里。

const App = () => {
return (
<NavigationContainer>
<RootStack.Navigator initialRouteName={'Main'}>
<RootStack.Screen
name={'Main'}
component={DrawerNavigator}
/>
<RootStack.Screen
name={'Work'}
component={Work}
/>
</RootStack.Navigator>
</NavigationContainer>
)
}

随着应用程序的增长，我建议您在不同的页面上创建堆栈元素，然后导出它们并在某些区域收集它们，这样就不会有困难。