修复错误:路由"Home"的组件必须是React组件

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)然后它会工作.因为使用export default了在HomeScreen组件的源文件,你不需要解构上import.这是试图访问HomeScreen组件上调用的变量,该变量正在解析undefined并导致您看到的错误.

或者,您可以删除defaultfrom export default并保持import相同.我个人更喜欢删除大括号,因为代码看起来更干净.

这条线上还有一个缺少的右括号:

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

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

Answer 2

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

从'./screens/HomeScreen'导入{主屏幕}；

和

从“./screens/HomeScreen”导入主屏幕；