react-native react-navigation-drawer 在应用启动时默认保持打开状态答案

【问题标题】：react-native react-nagivation-drawer keeps opening by default on App startupreact-native react-navigation-drawer 在应用启动时默认保持打开状态
【发布时间】：2019-10-01 11:07:16
【问题描述】：

我很抱歉这个问题可能会变成一个非常愚蠢的问题，但一段时间以来我一直在努力解决以下问题，但我是 react-native 的新手。我创建了一个 react-native 应用程序，我在其中实现了 react-navigation-drawer 导航，就像示例中一样。发生的情况是，每当我打开应用程序时，抽屉就会打开。当我从这里复制并粘贴示例时，也会发生同样的事情：https://reactnavigation.org/docs/en/drawer-based-navigation.html

这让我觉得我缺少依赖项的一些东西。我已经从所需的库中升级了我能想到的所有内容。我的 CPU 不是很好，所以我正在使用我的 Android 手机进行测试。

当我使用 react-navigation-drawer 时，我还会收到警告“componentWillMount 已重命名...”。

如果您能帮助指导我获得一些有用的信息！提前谢谢大家！

下面是一些示例代码：

import React from 'react';
import { FlatList, ActivityIndicator, Text, Header, Image, View, ScrollView, Alert, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight, StyleSheet  } from 'react-native';
import {Button, Icon, ThemeProvider} from 'react-native-elements';

import {createAppContainer, DrawerNavigator, withNavigation} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator, DrawerActions, DrawerLayoutAndroid} from 'react-navigation-drawer';
.....
const Screen1PageScreenStack = createStackNavigator({
    Screen1Page: {
        screen: Screen1Page,
    }
},{
    navigationOptions: ({ navigation }) => ({
        initialRouteName: 'Screen1Page',
        headerMode: 'screen',
        drawerLabel: 'HOME',
        drawerBackgroundColor: '#0000FF',
    }
)
});

const Screen2PageScreenStack = createStackNavigator({
    Screen2Page: {
        screen: Screen2Page,
    }
},{
    navigationOptions: ({ navigation }) => ({
        initialRouteName: 'Screen2Page',
        headerMode: 'screen',
        drawerLabel: 'Categories',

    }
),
});

const appNavigator = createDrawerNavigator({
Screen1Page: {
    name: 'Screen1PageScreenStack',
    screen: Screen1PageScreenStack,
},
Screen2Page: {
    name: 'Screen2PageScreenStack',
    screen: Screen2PageScreenStack,
}
});



const MyDrawerStrugglesApp = createAppContainer(appNavigator);
export default MyDrawerStrugglesApp ;

【问题讨论】：

能否请您在此处重现您的代码，以便提供帮助？
你试过我下面的答案了吗？
我做到了，不幸的是它只是从抽屉中隐藏了菜单的标签。但抽屉仍然存在，并在应用程序的其余部分上方打开。 :(
尝试重新定义您的堆栈和抽屉，如下例所示：jsfiddle.net/fte9sp2b。也尝试使用任何汉堡菜单按钮的onClick 打开抽屉，而不是使用默认的滑动手势
@amrs-tech 所以，问题在于我必须在手机上测试应用程序，因为没有足够的 CPU。所以我可以测试我必须摇动手机，这样我才能得到调试菜单，我必须点击重新加载。发生的事情是，我厌倦了它，所以我决定生成一个发布 APK，这样我就可以确定是测试环境导致了这个问题。是的！这就是问题所在！到目前为止，其他一切都与抽屉导航和堆栈导航一起正常工作！再次感谢您的帮助，我只是想给您一些反馈！

标签： android react-native react-navigation react-navigation-drawer

【解决方案1】：

您可以尝试使用此代码来隐藏您的抽屉以显示所需的屏幕：

const Nav = createDrawerNavigator(

{
    Home: {
      screen: AppLogin,
      navigationOptions:{
        drawerLockMode: 'locked-closed',
        drawerLabel: <Hidden />
      },

    },
}
);

您的Hidden 类应如下所示：

class Hidden extends React.Component {
  render() {
    return null;
  }
}

您可以更改 drawerLockMode 值以保持抽屉打开或关闭 - 请参阅 here 了解不同的值。

您也可以参考此SO answer here 以避免componentWillMount 弃用错误。希望这会有所帮助！

【讨论】：

【解决方案2】：

使用 react-navigation V5，您可以传递 openByDefualt 属性

 <Drawer.Navigator
      initialRouteName="Home"
      openByDefault>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Notifications" component={NotificationsScreen} />
 </Drawer.Navigator>

【讨论】：

【解决方案3】：

使用 react-navigation v6，您只需将 defaultStatus="closed" 属性直接传递给 Drawer.Navigator。应用程序将始终在抽屉关闭的情况下加载。

【讨论】：