javascript 修复错误：路由“Home”的组件必须是 React 组件

Fix Error: The component for route 'Home' must be a React component

提问by B Roy Dawson

I'm trying to used react-navigation but I can not get it to work when I move each screens' components into multiple files. I always get this error: "The component for route 'Home' must be a React component". This error doesn't happen if I move all of the code into one file, so I'm not sure what the difference is.

我正在尝试使用 react-navigation 但是当我将每个屏幕的组件移动到多个文件时我无法让它工作。我总是收到这个错误：“路线'Home'的组件必须是一个React组件”。如果我将所有代码移动到一个文件中，则不会发生此错误，因此我不确定有什么区别。

Here is my App.js:

这是我的 App.js：

import React from 'react';
import { StackNavigator } from 'react-navigation';
import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from 'react-native';

import { HomeScreen } from './screens/HomeScreen';
import { JoinScreen  from './screens/JoinScreen';
import { HostScreen } from './screens/HostScreen';


const Root = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: JoinScreen,
    }
  }, 
  {
    initialRouteName: 'Home',
    headerMode: 'none',
  }
);

export default class App extends React.Component {
  render() {
    return (
      <Root />
    )
  }
}

And here is my .screens/HomeScreen.js

这是我的 .screens/HomeScreen.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello World</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-around',
  }
});

回答by Matt Holland

I think that if you change this line:

我认为如果你改变这一行：

import { HomeScreen } from './screens/HomeScreen';

to:

到：

import HomeScreen from './screens/HomeScreen';

(i.e. removing the braces around HomeScreen) then it will work. Because you used export defaultin the HomeScreencomponent's source file, you don't need the destructuringon the import. This is attempting to access a variable called HomeScreenon the component, which is resolving to undefinedand causes the error you saw.

（即移除周围的大括号HomeScreen）然后它将起作用。因为使用export default了在HomeScreen组件的源文件，你不需要解构上import。这是试图访问HomeScreen在组件上调用的变量，该变量正在解析undefined并导致您看到的错误。

Alternatively, you can remove the defaultfrom export defaultand keep the importthe same. I personally prefer removing the braces as the code looks cleaner.

或者，您可以删除defaultfromexport default并保持import不变。我个人更喜欢去掉大括号，因为代码看起来更干净。

There's also a missing closing brace on this line:

此行还缺少一个右大括号：

import { JoinScreen  from './screens/JoinScreen';

But I assumed that was a typo ;)

但我认为这是一个错字;)

回答by Haythem Farhat

I think that react is having a problem figuring out what to import
Since you're exporting one thing by default You should replace

我认为 react 在确定要导入的内容时遇到问题
因为默认情况下您要导出一件事 您应该替换

import { HomeScreen } from './screens/HomeScreen';

和

import  HomeScreen  from './screens/HomeScreen';

回答by chandresh

It also happens if you do not export your class.

如果您不导出类，也会发生这种情况。

export default class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

回答by Md. Robi Ullah

Try with:

尝试：

Home: {
   screen: () => <HomeScreen/>,
},

回答by Vijay Kumar Kanta

Keep the braces intact for your external screen files imports. Just do the following and it should run on both Android and iOS simulators regardless

为您的外部屏幕文件导入保持大括号完好无损。只需执行以下操作，它应该可以在 Android 和 iOS 模拟器上运行，无论如何

// HomeScreen.js
... all imports
export class HomeScreen extends React.Component {
...

This fixed the issue for me in both platforms.

这在两个平台上都为我解决了这个问题。

回答by Keshav Gera

Add this to your js file at the bottom add this Line

将此添加到底部的 js 文件中添加此行

export default MainActivity;


import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation-stack';

class MainActivity extends Component{
  ...
}
export default MainActivity;