为啥从其他文件导入组件会导致“Invariant Violation: Element type is invalid”错误？

Posted 2023-02-19

【中文标题】为啥从其他文件导入组件会导致“Invariant Violation: Element type is invalid”错误？

【英文标题】：Why importing components from other files caused "Invariant Violation: Element type is invalid" error?为什么从其他文件导入组件会导致“Invariant Violation: Element type is invalid”错误？

【发布时间】：2018-10-25 01:57:55

【问题描述】：

我在 ios Swift 语言方面相当先进，但在 react 原生框架或 javascript 语言方面非常新。我也试图为堆栈导航器找到正确的教程几个小时，但我找不到它。我目前正在使用this tutorial 来学习 React Native 堆栈导航的基础知识，并希望将两个屏幕拆分为各自的文件。基本上，我想用它的AppDelegate.swift 和 View Controller 的文件来模仿 Swift。但它会产生这样的错误：

Invariant Violation：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：对象。您可能忘记从 它在其中定义的文件，或者您可能混淆了默认值和命名 进口。

这是老错误。现在的新错误：

TypeError: undefined is not an object (evalating 'this.props.navigation.navigate')

此错误位于：

在主屏幕中（在 renderApplication.js:33）

...

这是我当前的代码。已根据解决方案进行了编辑。

App.js：

import React from 'react';
import  Button, AppRegistry  from 'react-native';
import  StackNavigator  from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

export default HomeScreen;

const App = StackNavigator(
  Home:  screen: HomeScreen ,
  Profile:  screen: ProfileScreen ,
);

AppRegistry.registerComponent("TestProject", () => App);

HomeScreen.js：

import React from 'react';
import  Button  from 'react-native';
import  StackNavigator  from 'react-navigation';

export default class HomeScreen extends React.Component 
  static navigationOptions = 
    title: 'Welcome',
  ;
  render() 
    const  navigate  = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress=() =>
          navigate('Profile',  name: 'Jane' )
        
      />
    );
  

ProfileScreen.js：

import React from 'react';
import  Text  from 'react-native';
import  StackNavigator  from 'react-navigation';

export default class ProfileScreen extends React.Component 
  static navigationOptions = 
    title: 'Jane Profile',
  ;
  render() 
    const  navigate  = this.props.navigation;
    return (
      <Text>Welcome to Jane profile!</Text>
    );
  

如果我能指出我的代码中的任何错误和错误，我将不胜感激，因为现在我完全没有注意到我的代码中的任何问题，因为我自己正在学习这一点。请帮忙。每次学习新语言时，第一步总是最难的部分。

在这种情况下，我正在尝试创建一个带有按钮的主屏幕，该按钮通向带有文本的第二个屏幕（配置文件）。我也知道我应该能够在HomeScreen 发送的ProfileScreen 中提取配置文件的名称，但我现在对其进行了硬编码，以便让我更容易理解解决方案。

【问题讨论】：

您的每个组件中都不需要AppRegistry.registerComponent ("TestProject", () => Screen);。您需要注册您的***组件。此外，括号和registerComponent 之间有一个空格，应该删除。尝试从屏幕文件中删除它并将其添加到 App - AppRegistry.registerComponent("TestProject", () => App);

@Dan "You need to register your top level component" --> 这种情况下，你的意思是我需要在App.js中添加export default HomeScreen;吗？

抱歉刚刚更新，删除您的AppRegistry 语句并将其放入App 组件文件中。你的出口在我看来很好。

您的导航脚本错误！

您可能还需要使用createStackNavigator - reactnavigation.org/docs/en/stack-navigator.html

【参考方案1】：

试试这个

import React from 'react';
import  StackNavigator  from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const App = StackNavigator(
  HomeScreen:  screen: HomeScreen ,
  ProfileScreen:  screen: ProfileScreen ,
, 
  initialRouteName: 'HomeScreen',
  headerMode: 'none'
);

export default () => <App />;

路由名称应该相同，但不是强制性的 推荐。 导出导航元素。 我的项目中什至没有 AppRegistry 脚本，但它仍在工作。

如果有任何问题请在下方评论！希望这能解决问题

注意：这将适用于 react-navigation 版本 1.5.11

对于 react-navigation v2 试试这个代码

import React from 'react';
import  createStackNavigator  from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const App = createStackNavigator(
   HomeScreen:  screen: HomeScreen ,
   ProfileScreen:  screen: ProfileScreen ,
, 
   initialRouteName: 'HomeScreen',
   headerMode: 'none'
);

export default () => <App />;

将导航脚本文件设为全局以访问其道具！

【讨论】：

是的，我认为这有助于我更多地了解 AppRegistry 有时可以省略，尽管我现在不明白 AppRegistry 的意义是什么。目前，该错误现在变为更直接的 StackNavigator 错误。就像系统在HomeScreen中找不到this.props.navigation.navigate函数一样。

我的 react-navigation 版本是 2.0.1。

StackNavigator 应该可以通过所有路径访问！不要在每个页面中都导入它！

问题出在版本上！始终检查文档和 package.json 文件中的版本！很高兴它起作用了

在做了一个小研究后，我发现This API only works in projects made with react-native init or in those made with Create React Native App which have since ejected. 我使用 create-react-native-app cli 并且我从未弹出，所以 AppRegistery API 对我没有用

【参考方案2】：

在 react-native 中我们不会使用AppRegistry.registerComponent 注册每个组件，而是注册父组件和父组件渲染子组件。您需要的更改是注册App 组件并导出HomeScreen 和ProfileScreen。

示例

App.js

...
const App = StackNavigator(
  Home:  screen: HomeScreen ,
  Profile:  screen: ProfileScreen ,
);
AppRegistry.registerComponent('projectName', () => App)

HomeScreen.js

...
class HomeScreen extends React.Component 
  ...

export default HomeScreen;

ProfileScreen.js

...
class ProfileScreen extends React.Component 
  ...

export default ProfileScreen;

希望这会有所帮助！

【讨论】：

哦，我明白了。我认为 AppRegistry 是使该类广为人知的方式，并且可以在整个项目中使用。现在我已经更新了文件，关于导入导出文件的问题消失了，我又得到了一个错误。我认为现在它直接与堆栈导航器相关。

很高兴知道您的import 问题已解决:)。