只有一些导航器的不变违规（React-Navigation）

Posted 2023-02-21

【中文标题】只有一些导航器的不变违规（React-Navigation）

【英文标题】：Invariant Violation with only some Navigators (React-Navigation)

【发布时间】：2018-11-02 14:32:36

【问题描述】：

在尝试从 React-Navigation 实现导航器时，我遇到了一些奇怪的行为。

从https://reactnavigation.org/docs/en/hello-react-navigation.html尝试简单的“hello world”时...

import React from 'react';
import  View, Text  from 'react-native';
import  createStackNavigator  from 'react-navigation';

class HomeScreen extends React.Component 
  render() 
    return (
      <View style= flex: 1, alignItems: 'center', justifyContent: 'center' >
        <Text>Home Screen</Text>
      </View>
    );
  


export default createStackNavigator(
  Home: 
    screen: HomeScreen,
  ,
);

我收到此错误：

Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。 检查'SceneView'的渲染方法。

奇怪的是，在使用 StackNavigator（和 TabNavigator）时，我会遇到 Invariant Violation，而使用 DrawerNavigator 却不会！

This common fix (removing the braces in the import) gives a new error:

对象不是函数

And the common fix to "Object is not a function" leads me back to where I started (adding braces to the import).

我是 React-Native 的新手，不知道如何深入研究这个问题，感谢任何帮助！

-----编辑-----

我已将我的 react-navigation 版本降级到 v1.5.5 并且原始 StackNavigator 组件可以正常工作，所以这可能是与 v2.0.1 和我的环境的兼容性问题。

【参考方案1】：

我可能发现了您的问题。我认为您正在尝试遵循错误版本的文档。我假设你使用的是 React-Navigation V1。

您可以通过在项目根目录中的终端中运行“yarn list react-navigation”来查看当前安装的版本。

V1 文档：https://v1.reactnavigation.org/docs/hello-react-navigation.html

如果我使用上面链接中的示例，一切正常。或许你可以试试？

标记

【讨论】：

嗨，马克，告诉我有 -react-navigation@2.0.1 尝试使用旧的“StackNavigator”给了我一个警告，它已被弃用并改用“createStackNavigator”。

【参考方案2】：

如果您的react-native 具有正确的react 版本，请检查package.json。例如，

"react": "16.4.0",
"react-native": "^0.53",
"react-navigation": "^2.0.4",

不适合我，但是

"react": "16.2.0",
"react-native": "^0.53",
"react-navigation": "^2.0.4",

有效。

【讨论】：

不知道为什么没有更多的支持。解决了我的问题

这是我发现的最奇怪的错误，浪费了我 3 个小时的时间。我的package.json 中有"react": "^16.2.0"，但意识到它正在解析为16.6.3 并导致此错误。回滚到 "16.2.0" 为我修复了这个错误。