为什么从其他文件导入组件会导致“不变违规:元素类型无效"?错误? [英] Why importing components from other files caused "Invariant Violation: Element type is invalid" error?

问题描述

我在iOS Swift语言方面相当先进，但是在react native框架或javascript语言方面还是非常新的.我还尝试了几个小时的堆栈导航器指南，但找不到.我目前正在使用本教程来学习react native的基本知识堆栈导航，并希望将两个屏幕分成各自的文件.基本上，我想用它的AppDelegate.swift和View Controller的文件模仿Swift.但它会产生如下错误:

I'm fairly advanced in iOS Swift language, but very new in react native framework or javascript language. I also have tried to find the right tutorial for stack navigator for hours but I can't find it. I'm currently using this tutorial to learn the basic of react native stack navigation, and would like to split the two screens into their own files. Basically, I want to mimic Swift with its AppDelegate.swift and View Controller's files. But it generates error like this:

不变违规:元素类型无效:预期为字符串(对于 内置组件)或类/函数(用于复合组件) 但得到:对象.您可能忘记了从 定义的文件，或者您可能混淆了默认文件并命名为 进口.

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.

那是旧错误.现在出现新错误:

That was old error. The new error now:

TypeError:undefined不是对象(正在评估'this.props.navigation.navigate')

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

此错误位于:

在HomeScreen中(在renderApplication.js:33)

in HomeScreen (at renderApplication.js:33)

...

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

Here's my current code. This has been edited according to the solutions.

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:

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:

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

对于任何指出我的代码中的错误和错误的方法，我将不胜感激，因为到目前为止，由于我自己正在学习这方面的知识，所以我对代码中的任何问题都完全没了.请帮忙.每次我学习新语言时，第一步都是最困难的一步.

I would greatly appreciate any point out to any error and mistake in my code, as for now I'm completely oblivious to any problems in my code, as I'm learning this by myself. Please help. The first baby steps are always the hardest part every time I learn new language.

在这种情况下，我试图创建一个带有一个按钮的主屏幕，该按钮会导致第二个屏幕(配置文件)中包含文本.我还知道，我应该能够在HomeScreen发送的ProfileScreen中提取配置文件的名称，但是我现在对其进行了硬编码，以使事情更容易理解.

In this case, I'm trying to create a home screen with a button that leads to a second screen (profile) with a text in it. I'm also aware that I should be able to extract the name of the profile in the ProfileScreen which the HomeScreen sent, but I hardcoded it right now to make things simple for me to understand the solution.

推荐答案

尝试一下

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

1. 路线名称应该不是强制性的，但应相同 推荐.
2. 导出导航元素.
3. 我的项目中甚至没有 AppRegistry 脚本，但该脚本仍在工作.

1. The name of the route should be same not mandatory but recommended.
2. Export the navigation element.
3. I don't even have a AppRegistry script in my project but it is still working.

如果有任何问题，请在下面进行评论！希望这能解决问题

If any issue comment that down below! Hope this will fix the issue

注意::这将在反应导航版本1.5.11

对于反应导航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 />;

使导航脚本文件具有全局性以访问其道具！

Make the navigation script file global to access its props!

这篇关于为什么从其他文件导入组件会导致“不变违规:元素类型无效"?错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！