React Native开发：如何在Stack导航页面中嵌套Drawer导航？

我帮你把代码补全并梳理清楚逻辑，完全匹配你要的登录页、带抽屉导航的首页，以及抽屉里的三个功能页面：

首先，这里基于你用的react-navigation旧版本（StackNavigator/DrawerNavigator）来写，如果是v3+版本，我也会在后面说明调整方式。

完整的App.js代码 #

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Login from './src/components/Login';
import SignUp from './src/components/SignUp';
import Home from './src/components/Home';
import DeviceRegistration from './src/components/DeviceRegistration';
import Call from './src/components/Call';
import SoundCheck from './src/components/SoundCheck';

// 1. 定义抽屉导航：包含首页和三个功能页面
const AppDrawer = DrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      drawerLabel: '首页' // 可自定义抽屉中显示的文字，英文场景改成'Home'即可
    }
  },
  DeviceRegistration: {
    screen: DeviceRegistration,
    navigationOptions: {
      drawerLabel: '设备注册'
    }
  },
  Call: {
    screen: Call,
    navigationOptions: {
      drawerLabel: '通话'
    }
  },
  SoundCheck: {
    screen: SoundCheck,
    navigationOptions: {
      drawerLabel: '声音检测'
    }
  }
});

// 2. 定义全局栈导航：包含登录、注册页，以及整个抽屉导航
const AppNavigator = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      header: null // 登录页一般隐藏顶部导航栏，更符合用户习惯
    }
  },
  SignUp: {
    screen: SignUp,
    navigationOptions: {
      title: '注册'
    }
  },
  MainDrawer: {
    screen: AppDrawer,
    navigationOptions: ({ navigation }) => ({
      title: '首页',
      headerLeft: (
        // 给首页顶部添加抽屉触发按钮，点击打开抽屉
        <TouchableOpacity 
          onPress={() => navigation.openDrawer()}
          style={{ paddingHorizontal: 15 }}
        >
          <Text>☰</Text>
        </TouchableOpacity>
      )
    })
  }
});

export default AppNavigator;

关键逻辑说明 #

• 分层设计：先做抽屉导航包裹所有主功能页面，再用栈导航包裹登录/注册页和抽屉导航，确保用户必须完成登录才能进入主应用的抽屉界面。
• 抽屉触发方式：在首页的顶部导航栏左侧添加了一个菜单按钮，点击可以打开抽屉；你也可以在Home组件内部通过this.props.navigation.openDrawer()来触发（默认也支持侧边滑动手势打开抽屉）。
• 版本兼容提示：如果你的react-navigation是v3/v4版本，需要把导入和创建方式改成：

  // v3/v4版本的导入与创建
  import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
  
  // 替换原来的StackNavigator为createStackNavigator，DrawerNavigator为createDrawerNavigator
  const AppDrawer = createDrawerNavigator({ ... });
  const AppNavigator = createStackNavigator({ ... });
  

补充提示 #

在Login组件中，登录成功后可以通过以下代码跳转到主抽屉界面：

this.props.navigation.navigate('MainDrawer');

内容的提问来源于stack exchange，提问作者VK1