Question

我一直在尝试进行导航，但我一直在解决这个问题。如何禁用屏幕“工作”的抽屉。我知道抽屉有一个选项 'gestureEnabled' 但我试图把它放到堆栈的选项中，但它不起作用。或者无论如何我可以在堆栈的选项中执行“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,
    }} 
/>

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

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

                <RootStack.Screen
                    name={'Work'}
                    component={Work}
                />
            </RootStack.Navigator>
       </NavigationContainer>
    )
}

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

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

1 个答案: