react-native - 反应导航抽屉不会保持打开状态

Question

当我尝试将其滑动打开时，它会立即向后摆动。

我将堆栈与抽屉一起使用也许这可能是一个问题，但到目前为止 我已经尝试了一切，审查了所有类似的问题，但没有任何效果

我的代码：

const Drawer = createDrawerNavigator();
function DrawerNav({ navigation }) {
  // toggleDrawer = () => {
  //   this.props.navigation.dispatch(DrawerActions.toggleDrawer())
  // }
  
  return (
    <Drawer.Navigator initialRouteName="Home" 
      screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: brand,
        },
        headerTintColor: primary,
        headerTransparent: false,
        headerTitle: '',
        headerLeftContainerStyle: {
          paddingLeft: 20,
        },
    }}>
      <Drawer.Screen name="Home" component={HomeScreen} options={horizontalAnimation}/>
    </Drawer.Navigator>
  );
}

const Stack = createStackNavigator();
const RootStack = () => {

  return (
    <CredentialsContext.Consumer>
      {({ storedCredentials }) => (
        <NavigationContainer>
          <Stack.Navigator
            screenOptions={{
              headerStyle: {
                backgroundColor: brand,
              },
              headerTintColor: primary,
              headerTransparent: true,
              headerTitle: '',
              headerLeftContainerStyle: {
                paddingLeft: 20,
              },
            }}
            
          >
            {storedCredentials ? (
              <Stack.Screen name="Home" component={DrawerNav} options={horizontalAnimation}/>
              
            ) : (
              <>
                <Stack.Screen name="Login" component={Login} options={horizontalAnimation}/>
                <Stack.Screen name="Signup" component={Signup} options={horizontalAnimation}/>
              </>
            )}
          </Stack.Navigator>
        </NavigationContainer>
      )}
    </CredentialsContext.Consumer>
  );
};

任何帮助将不胜感激，在此先感谢。

标签： react-nativereact-navigationreact-navigation-drawer

Answer 1

我遇到过同样的问题。我发现我的一些 react-navigation 库不在同一个主要版本上（在 package.json 中）。因此，我将它们全部更改为相同的主要版本号，在我的情况下为 6.X，重新安装了软件包，我的代码开始工作。

-    "@react-navigation/bottom-tabs": "^6.0.1",
-    "@react-navigation/native": "^5.9.4",
-    "@react-navigation/stack": "^5.14.5",
+    "@react-navigation/drawer": "^6.1.4",
+    "@react-navigation/native": "^6.0.4",
+    "@react-navigation/stack": "^6.0.9",