反应原生，侧边菜单没有出现答案

【问题标题】：React native, Side menu not coming up反应原生，侧边菜单没有出现
【发布时间】：2019-01-16 15:32:58
【问题描述】：

我遵循了本教程https://codeburst.io/custom-drawer-using-react-navigation-80abbab489f7。当我在模拟器上运行时，我得到了这个错误：

Invariant Violation：此导航器缺少导航道具。在 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.openDrawer()'）新闻 C:\react\cash\src\Home.js:9:8 可触摸的HandlePress C:\react\cash\node_modules\react-native\Libraries\Components\Touchable\TouchableNativeFeedback.android.js:196:11 _performSideEffectsForTransition C:\react\cash\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:316:23 _receiveSignal C:\react\cash\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:723:34 touchableHandleResponderRelease C:\react\cash\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:452:17 调用GuardedCallbackImpl C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:99 调用GuardedCallback C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:343:16 调用GuardedCallbackAndCatchFirstError C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:346:6 执行调度 C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:724:32 executeDispatchesInOrderexecuteDispatchesAndRelease C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:892 执行DispatchesAndReleaseTopLevelforEachAccumulated C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:884:14 runEventsInBatch C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:1066:15 运行ExtractedEventsInBatch C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:1078 C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2726:1 批量更新$1 C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:17302:5 批量更新 C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2622:6 _receiveRootNodeIDEvent C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2725:2 接收触摸 C:\react\cash\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2788:21 __callFunction__guardcallFunctionReturnFlushedQueue

【问题讨论】：

标签： react-native

【解决方案1】：

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

他们改变了打开抽屉的方式：

this.props.navigation.openDrawer()

在this part of the doc，你可以找到你想要的。

【讨论】：