反应原生，侧边菜单未出现

Question

我遵循了本教程https://codeburst.io/custom-drawer-using-react-navigation-80abbab489f7.当我在emulator上运行时，会出现以下错误：

不变冲突：此导航器缺少导航道具。在react navigation 3中，您必须直接设置应用程序容器

然后我更改了这段代码：

export default createDrawerNavigator({
  Home: {
    screen: Home
  },
  Settings: {
    screen: Settings
  },
}, {
  contentComponent: SideMenu,
  drawerWidth: 300
});

到

const Nav = createDrawerNavigator({
  Home: {
    screen: Home
  },
  Settings: {
    screen: Settings
  },
}, {
  contentComponent: SideMenu,
  drawerWidth: 300
});
const Routes = createAppContainer(Nav);
export default Routes;

然后应用程序开始工作，但当我点击

<Button onPress={() => this.props.navigation.navigate('DrawerOpen')} title="Settings"/>

什么都没发生（也没有错误）。我很困惑

更新如果我使用

<Button onPress={() => this.props.navigation.openDrawer()} title="Settings"/>

我明白了

undefined不是函数(求值' _ this . props . navigation . open drawer()')on press C:\ react \ cash \ src \ home . js:9:8 touchableHandlePress C:\ react \ cash \ node _ modules \ react-native \ Libraries \ Components \ Touchable \ touchablenativefeedback . Android . js:196:11 _ performsideffectsfortransion C:\ react \ cash \ node _ modules \ react-native \ Libraries \ Components \ Touchable . js:316:23

Answer 1

您遵循的教程可能已经过时，并且可能使用了React navigation的2.x版本。

他们把打开抽屉的方式改为：

this.props.navigation.openDrawer()

在文档的这一部分，你可以找到你想要的。