Reactnative 修复错误：路由 'Home' 的组件必须是 React 组件

我试图使用react-navigation ，但当我将每个屏幕的组件移动到多个文件中时，我无法让它工作.我总是会遇到这样的错误:"路由‘Home’的组件必须是React组件".如果我将所有代码移到一个文件中，则不会发生此错误，因此我不确定区别是什么.

这是我的应用程序.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 />
    )
  }
}

这是我的.屏幕/主屏幕.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',
  }
});