如何保持 React Native 抽屉粘性？

Question

这是组件的代码

        <NavigationContainer>
          <Header deviceUid={deviceUid} />
          <Drawer.Navigator
            drawerContent={props => <MotionMenu {...props} />}
            screenOptions={{
              drawerPosition: 'right',
              drawerType: 'front',
              swipeEnabled: false,
              drawerStyle: {
                width: 320,
              },
              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>

我尝试了“drawerType：'permanent'”，但这只是将视图和抽屉彼此对齐

Answer 1

尝试此示例并相应地修改您的代码和导航配置：

import * as React from 'react';
import { createDrawerNavigator, createStackNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

// Sample screens (replace with your actual screens)
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button title="Go to Settings" onPress={() => navigation.navigate('Settings')} />
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

function NotificationsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Notifications Screen</Text>
    </View>
  );
}

// Create the tab navigator
const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Notifications" component={NotificationsScreen} />
    </Tab.Navigator>
  );
};

// Create the stack navigator
const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Tab" component={TabNavigator} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
};

// Create the drawer navigator
const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={StackNavigator} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

希望对您有帮助。