如何在React Native中使用react-navigation自定义抽屉导航

你当前使用的react-navigation 6.x版本的drawer组件本身就支持完全自定义该效果，无需引入额外第三方库，具体实现步骤如下：

1. 基础配置说明 #

你现有依赖版本完全匹配，无需调整，先确保你已经正确安装了drawer的必要对等依赖：
react-native-gesture-handler、react-native-reanimated，且已经在babel.config.js中配置了reanimated的插件。

2. 自定义抽屉打开时的主屏幕样式 #

核心通过screenOptions的sceneContainerStyle配合抽屉状态监听实现缩放、圆角、偏移效果：

import { createDrawerNavigator } from '@react-navigation/drawer';
import { useDrawerStatus } from '@react-navigation/drawer';
import { Animated } from 'react-native';

const Drawer = createDrawerNavigator();

// 自定义屏幕包裹组件，监听抽屉状态动态改样式
function ScreenWrapper({ children }) {
  const drawerStatus = useDrawerStatus();
  const isOpen = drawerStatus === 'open';
  
  return (
    <Animated.View
      style={{
        flex: 1,
        borderRadius: isOpen ? 16 : 0,
        transform: [
          { scale: isOpen ? 0.9 : 1 },
          { translateX: isOpen ? 20 : 0 }
        ],
        overflow: 'hidden'
      }}
    >
      {children}
    </Animated.View>
  )
}

function AppDrawer() {
  return (
    <Drawer.Navigator
      drawerType="slide"
      drawerStyle={{
        width: '75%',
        backgroundColor: 'transparent'
      }}
      // 自定义抽屉内部内容
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      screenOptions={{
        headerShown: false,
        drawerPosition: 'left',
        sceneContainerStyle: {
          backgroundColor: '你的页面背景色'
        }
      }}
    >
      <Drawer.Screen name="HomeStack">
        {(props) => <ScreenWrapper><HomeStack {...props} /></ScreenWrapper>}
      </Drawer.Screen>
      {/* 其余抽屉屏幕按相同逻辑配置即可 */}
    </Drawer.Navigator>
  )
}

3. 自定义抽屉内容 #

你可以完全自主实现CustomDrawerContent组件，和普通React Native组件开发逻辑一致，按需添加头像、菜单列表、分割线等元素即可，通过组件props可以拿到导航方法、当前激活路由等信息，实现菜单选中态效果。

如果确实想使用第三方库实现，也可以选择react-native-drawer-layout，但该方案需要你自己处理和react-navigation的路由适配，没有直接基于现有drawer组件自定义的方案高效。

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