react-native react-nagivation-drawer 在应用程序启动时默认保持打开状态

Question

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

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

我还收到警告"组件将挂载已重命名..."当我使用反应导航抽屉时。

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

下面是一些示例代码：

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 ;

Answer 1

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

const Nav = createDrawerNavigator(
{
Home: {
screen: AppLogin,
navigationOptions:{
drawerLockMode: 'locked-closed',
drawerLabel: <Hidden />
},
},
}
);

您的Hidden类应如下所示：

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

您可以更改drawerLockMode值以保持抽屉打开或关闭 - 有关不同的值，请参阅此处。

您也可以在此处参考此SO答案，以避免componentWillMount弃用错误。希望这有帮助！

Answer 2

使用 react-navigation V5 你可以传递openByDefualt道具

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

Answer 3

使用 react-navigation v6，您需要做的就是将defaultStatus="closed"道具直接传递给 Drawer.Navigator。该应用程序将始终在抽屉关闭的情况下加载。