如何将反应导航模块添加到反应式应用程序? [英] How to add react-navigation module to reactive app?

问题描述

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

I've installed the react-navigation module inside the project's folder:

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

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

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: 不支持 fsevents@1.2.7 的平台:想要 {"os":"darwin","arch":"any"}(当前:{"os":"linux","arch":"x64"})

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

• react-navigation@3.3.2添加了 10 个贡献者的 22 个包，并在 43.188 秒内审核了 103279 个包发现 11 个低严重性漏洞运行 npm audit fix 来修复它们，或者运行 npm audit 获取详细信息

• react-navigation@3.3.2 added 22 packages from 10 contributors and audited 103279 packages in 43.188s found 11 low severity vulnerabilities run npm audit fix to fix them, or npm audit for details

但是当我尝试使用 import { StackNavigator } from 'react-navigation';

我在远程调试时在浏览器中出现以下错误

I've got the following error in the browser when debugging remotely

类型错误:bundle.modules 未定义

TypeError: bundle.modules is undefined

推荐答案

在新的 react-native 版本中，react-navigation 有变化强>.StackNavigator 已替换为 createStackNavigator.

In the new react-native version there is change in react-navigation. StackNavigator has been replaced by createStackNavigator.

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

You have to also install react-native-gesture-handler along with react-navigation.(commands below)

 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);

这篇关于如何将反应导航模块添加到反应式应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！