如何让React Native Drawer保持固定显示（粘性状态）？

针对你想要的抽屉固定显示效果，drawerType: 'permanent'会让抽屉和内容区并排布局，不符合需求。可以通过以下两种方式实现抽屉始终展开且固定在右侧的效果：

方案一：基于 React Navigation 抽屉组件改造 #

通过强制抽屉保持打开状态，并调整样式实现固定定位：

import { useEffect } from 'react';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { Drawer } from '@react-navigation/drawer';

const StickyDrawerContainer = ({ deviceUid }) => {
  const navigation = useNavigation();

  useEffect(() => {
    // 组件挂载时自动打开抽屉
    navigation.openDrawer();
  }, [navigation]);

  return (
    <NavigationContainer>
      <Header deviceUid={deviceUid} />
      <Drawer.Navigator
        drawerContent={props => <MotionMenu {...props} />}
        screenOptions={{
          drawerPosition: 'right',
          drawerType: 'front',
          swipeEnabled: false,
          overlayColor: 'transparent', // 禁用遮罩关闭逻辑
          drawerStyle: {
            width: 320,
            position: 'absolute',
            right: 0,
            height: '100%',
            elevation: 5, // 确保抽屉在内容上方显示
          },
          drawerContentContainerStyle: {
            alignItems: 'center',
            alignContent: 'center',
            height: '100%',
          },
          headerShown: false,
          detachInactiveScreens: false,
        }}>
        <Drawer.Screen
          screenOptions={{
            headerShown: false,
            unmountOnBlur: false,
          }}
          name="App"
          component={TabNavigation}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default StickyDrawerContainer;

方案二：完全自定义固定抽屉布局 #

如果觉得依赖 React Navigation 的抽屉行为不够灵活，可以直接自定义布局结构：

import { View, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

const StickyDrawerLayout = ({ deviceUid }) => {
  return (
    <View style={styles.container}>
      <Header deviceUid={deviceUid} />
      <View style={styles.contentWrapper}>
        {/* 主内容区域 */}
        <NavigationContainer>
          <TabNavigation />
        </NavigationContainer>
        {/* 固定在右侧的抽屉 */}
        <View style={styles.drawer}>
          <MotionMenu />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentWrapper: {
    flex: 1,
    position: 'relative',
  },
  drawer: {
    position: 'absolute',
    right: 0,
    top: 0,
    width: 320,
    height: '100%',
    backgroundColor: '#fff',
    elevation: 5,
  },
});

export default StickyDrawerLayout;

注意事项 #

• 方案一中需要确保MotionMenu组件没有关闭抽屉的按钮，若有需隐藏或移除
• 方案二中无需依赖抽屉导航的内置逻辑，可完全自定义抽屉的交互与样式

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