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

Posted 2023-03-15

【中文标题】反应原生，侧边菜单没有出现

【英文标题】：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

【参考方案1】：

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

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

this.props.navigation.openDrawer()

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