2

我很抱歉这个问题可能会变成一个非常愚蠢的问题，但一段时间以来我一直在努力解决以下问题，但我是 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 ;
4

3 回答 3

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弃用错误。希望这可以帮助 ！

于 2019-10-01T11:17:01.437 回答
0

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

 <Drawer.Navigator
      initialRouteName="Home"
      openByDefault>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Notifications" component={NotificationsScreen} />
 </Drawer.Navigator>
于 2020-10-17T09:05:24.270 回答
0

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

于 2021-08-16T20:57:34.833 回答