ios - 在登录和注册堆栈上禁用抽屉导航向右滑动，但在 React Native Navigation 5.x 中的其他堆栈上禁用

Question

我正在尝试在登录/注册堆栈之后的选项卡屏幕上实现嵌套抽屉导航。我遇到的一个问题是抽屉可以从登录/注册中访问，而不仅仅是在选项卡导航上。

这是我的导航代码：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Login from '../screens/Login.js'
import Signup from '../screens/Signup.js'
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { TouchableOpacity } from 'react-native-gesture-handler';
import CameraScreen from '../screens/Camera.js'
import {Ionicons, EvilIcons} from '@expo/vector-icons'
import Home from '../screens/Home.js';
import LivingRoom from '../screens/LivingRoom.js'
import Activity from '../screens/Activity.js'
import Post from '../screens/Post.js'
import Profile from '../screens/Profile.js'
import CommentScreen from '../screens/Comment.js'
import { MaterialIcons } from '@expo/vector-icons';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import { useDispatch, useSelector } from "react-redux";
import { StyleSheet, Text, View, ImageBackground, Image } from 'react-native';

const Drawer = createDrawerNavigator();

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();



const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    profile: {
        marginTop: 100,
        width: 80,
        height: 80,
        borderRadius: 40,
        borderWidth: 3,
        borderColor: "#fff"
    },
    name: {
        color: "#000",
        fontSize: 20,
        fontWeight: "800",
        marginVertical: 8
    },
});

  
const navigationRef = React.createRef();

function navigate(name, params) {
    navigationRef.current && navigationRef.current.navigate(name, params);
}

function TabNavigator() {
    return (
            <Tab.Navigator
                 
                screenOptions={({ route }) => ({
                    tabBarIcon: ({ color, size, focused }) => {
                        if(route.name === "Home"){
                            return <Ionicons name="ios-home" size={28}  />
                        }
                       
                        if(route.name === "Post"){
                            return <Ionicons name="ios-add-circle"
                                size={32}
                                color="#FF6E65"
                                style={{
                                    shadowColor: "#E9446A",
                                    shadowOffset: { width: 0, height: 10 },
                                    shadowRadius: 10,
                                    shadowOpacity: 0.3
                                }}/>
                        }
                        if(route.name === "Living Room"){
                            return <Ionicons name="ios-chatbubbles" size={28} />
                        }
                    },
                
                })}
                tabBarOptions={{
                    activeTintColor: "#FF6E65",
                    height: 100,
                    paddingVertical: 10
                }}
                
            >
                
                <Tab.Screen name="Home"  component={Home} />
                <Tab.Screen name="Post" component={Post} />
                <Tab.Screen name="Living Room" component={LivingRoom} />


            </Tab.Navigator>
    );
}


function StackNavigator({ navigation }){
    return (
    <Stack.Navigator
                //   initialRouteName="Comment"
                 >

        <Stack.Screen name="Login" component={Login} options={{headerShown: false}} />
        <Stack.Screen name="Signup" component={Signup} options={{ title: 'Sign up' }}/>
        
        <Stack.Screen name="TabNavigator" component={TabNavigator} options={{
                        title: "Home" ,
            headerLeft: () => (
                <TouchableOpacity onPress={
                    () => navigate('Camera')
                }>
                    <Ionicons style={{marginLeft: 10}} name={'ios-camera'} size={30}/>
                </TouchableOpacity>
            ),
            gestureEnabled: false,
            headerRight: () => (
                <TouchableOpacity onPress={
                    () => navigation.openDrawer()
                }>
                    <MaterialIcons style={{marginRight: 10}} name={'people'} size={30}/>
                </TouchableOpacity>
            ),
        }}/>
        <Stack.Screen name="Camera" component={CameraScreen} options={{ headerShown: false }}/>
        <Stack.Screen name="Comment" component={CommentScreen} options={{ headerShown: true }}/>

    </Stack.Navigator>
    );
}


function CustomDrawerContent(props) {
    const username = useSelector(state => state.user.username);
    const avatar = useSelector(state => state.user.avatar);
    return (
      <DrawerContentScrollView {...props} >
        <ImageBackground
            source={require("../assets/background.png")}
            style={{ width: undefined, padding: 16, paddingTop: 48 }}
        >
          <Image source={{uri: avatar}} style={styles.profile} />
          <Text style={styles.name}>{username}</Text>
        </ImageBackground>
        <DrawerItemList  {...props} />
      </DrawerContentScrollView>
    );
  }

function MyDrawer() {
    return (
        <Drawer.Navigator drawerPosition={'right'} drawerStyle={{
            backgroundColor: '#fff',
          }} drawerContentOptions={{
            activeBackgroundColor: '#FF6E65',
            activeTintColor: "#FFF",
          }} drawerContent={props => <CustomDrawerContent {...props} />}>
            <Drawer.Screen name="Home" component={StackNavigator}  />
            <Drawer.Screen name="My Profile" component={Profile} />
        </Drawer.Navigator>
    );
  }

function AuthNavigator() {
        // console.log(navigation)
        return (
            
            <NavigationContainer ref={navigationRef}>
                <MyDrawer/>
            </NavigationContainer>
          );
}

export default (AuthNavigator)

这是我的标签导航代码：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../screens/Home.js';
import Search from '../screens/Search.js'
import Activity from '../screens/Activity.js'
import Post from '../screens/Post.js'
import Profile from '../screens/Profile.js'
import {Ionicons} from '@expo/vector-icons'
// import { HomeNavigator } from './StackNavigator.js'

const Tab = createBottomTabNavigator();


export default class TabNavigator extends React.Component {
    render(){
        return (
                <Tab.Navigator
                    
                    screenOptions={({ route }) => ({
                        tabBarIcon: ({ color, size, focused }) => {
                            if(route.name === "Home"){
                                return <Ionicons name="ios-home" size={32}  />
                            }
                            if(route.name === "Search"){
                                return <Ionicons name="ios-search" size={32} />
                            }
                            if(route.name === "Post"){
                                return <Ionicons name="ios-add-circle-outline" size={32}/>
                            }
                            if(route.name === "Activity"){
                                return <Ionicons name={focused ? "ios-heart" : "ios-heart-empty"} size={32} />
                            }
                            if(route.name === "Profile"){

                                return <Ionicons name="ios-person" size={32} />
                            }
                        },
                       
                    })}
                    tabBarOptions={{
                        height: 100,
                        paddingVertical: 10
                    }}

                    
                >
                    
                    <Tab.Screen name="Home"  component={Home} />
                    <Tab.Screen name="Search" component={Search} />
                    <Tab.Screen name="Post" component={Post} />

                    <Tab.Screen name="Activity" component={Activity} />
                    <Tab.Screen name="Profile" component={Profile} />

                </Tab.Navigator>
        );
    }
}

我尝试在登录和注册堆栈屏幕中将手势设置为 false，但这只会消除堆栈屏幕本身的手势，而不是抽屉本身的手势。我希望抽屉只能从选项卡导航器访问，但 React Navigation 5.x 说要将所有内容嵌套在抽屉本身下。我该怎么办？谢谢！

标签： iosreactjsreact-native