javascript - 修复错误 : The component for route 'Home' must be a React component

Question

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

这是我的 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 />
    )
  }
}

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

Answer 1

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

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

到:

import HomeScreen from './screens/HomeScreen';

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

或者，您可以从 export default 中删除 default 并保持 import 不变。我个人更喜欢删除大括号，因为代码看起来更清晰。

这一行还缺少右括号:

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

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