如何将react导航模块添加到react应用程序？

Question

我已在项目文件夹中安装了react导航模块：

#######################################################################################################

NPM警告可选跳过可选依赖性：fsevents@1.2.7（node_modules/fsecents）：

NPM警告不支持跳过选项依赖性：不支持fsevents@1.2.7平台：需要{os： Darwin， arch： any}（当前：{os： linux， arch： x64}）

• 反应-navigation@3.3.2添加了来自10个贡献者的22个包，并在43.188s中审计了103279个包，发现了11个低严重性漏洞，请运行npm audit fix进行修复，或npm audit获取详细信息

但是当我试图在组件中包含StackNavigator时，我使用了import{StackNavigator}from'react navigation'

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

bundle.modules未定义




Answer 1

在新的react-native版本中，react-navigation发生了变化StackNavigator已被createStackNavigator取代。

您还必须安装react原生手势处理程序以及react导航。（下面的命令）

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