如何将反应导航模块添加到反应式应用程序？答案

【问题标题】：How to add react-navigation module to reactive app?如何将反应导航模块添加到反应式应用程序？
【发布时间】：2019-07-19 10:57:49
【问题描述】：

我已经在项目文件夹中安装了react-navigation 模块：

~/react-tutorial/react-native/Project1$ npm install --save react-navigation

npm WARN 可选跳过可选依赖：fsevents@1.2.7 (node_modules/fsevents)：

npm WARN notsup 跳过可选依赖：fsevents@1.2.7 不受支持的平台：想要 {"os":"darwin","arch":"any"}（当前：{"os":"linux","拱":"x64"})

反应导航@3.3.2 添加来自 10 个贡献者的 22 个包，并在 43.188 秒内审核了 103279 个包发现 11 个低严重性漏洞运行npm audit fix 来修复它们，或npm audit 了解详情

但是当我尝试将StackNavigator 包含在带有import { StackNavigator } from 'react-navigation'; 的组件中时

远程调试时浏览器出现如下错误

TypeError: bundle.modules 未定义

【问题讨论】：

删除 npm 模块，然后运行 npm install ，再试一次！

标签： react-native react-navigation

【解决方案1】：

在新的react-native 版本中，react-navigation 发生了变化。 StackNavigator 已替换为 createStackNavigator。

您必须同时安装react-native-gesture-handler 和react-navigation.（下面的命令）

 npm install --save react-native-gesture-handler // install

 react-native link react-native-gesture-handler  // link

我会在下面提供一些语法帮助

old version below -

import { StackNavigator } from 'react-navigation';

    const PrimaryNav = StackNavigator({
      Splash: { screen: Splash },
      Login: { screen: Login },
     }, {
        // Default config for all screens
        headerMode: 'none',
        initialRouteName: 'Splash',
      });

New Version below - 

import { createAppContainer, createStackNavigator } from 'react-navigation';

const MainNavigator = createStackNavigator({
  Splash: { screen: Splash }
},
  {
    // Default config for all screens
    headerMode: 'none',
    initialRouteName: 'Splash'
  });

const PrimaryNav = createAppContainer(MainNavigator);

【讨论】：