Question

我遵循了本教程http://localhost:8080。当我在模拟器上运行时，出现此错误：

不变违反：此导航器缺少导航道具。在 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"/>

我明白了

未定义不是函数（评估'_this.props.navigation.openDrawer（）'） onPress C：\ react \ cash \ src \ Home.js：9：8 touchableHandlePress 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 invokeGuardedCallbackImpl C：\ react \ cash \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js：99 invokeGuardedCallback C：\ react \ cash \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js：343：16 invokeGuardedCallbackAndCatchFirstError C：\ react \ cash \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js：346：6 executeDispatch 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 executeDispatchesAndReleaseTopLevelforEachAccumulated 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 runExtractedEventsInBatch 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 receiveTouches C：\ react \ cash \ node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js：2788：21 __callFunction__guardcallFunctionReturnFlushedQueue

Answer 1

您遵循的教程可能已过时，可能正在使用2.x版本的React-navigation。

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

this.props.navigation.openDrawer()

在this part of the doc中，您可以找到想要的东西。

反应本机，侧边菜单不显示

1 个答案: