为什么从其他文件导入组件会导致 "Invariant Violation: Element type is invalid" 错误？

Question

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

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

那是旧错误。现在的新错误：

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

This error is located at:

in HomeScreen (at 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 中提取配置文件的名称，但我现在对其进行硬编码以使事情变得简单，以便我理解解决方案。

Answer 1

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

希望这会有所帮助！

Answer 2

试试这个

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

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

为什么从其他文件导入组件会导致 "Invariant Violation: Element type is invalid" 错误？

Why importing components from other files caused "Invariant Violation: Element type is invalid" error?

javascript

jsx

react-native

stack-navigator