Javascript 修复错误：路由的组件'；主页'；必须是反应组件

我尝试使用react导航，但当我将每个屏幕的组件移动到多个文件中时，我无法使其工作。我总是会遇到这样的错误：“路由‘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 />
    )
  }
}

从“React”导入React；
从“react navigation”导入{StackNavigator}；
从“react native”导入{AppRegistry，StyleSheet，Text，View，TouchableHighlight}；
从“./screens/HomeScreen”导入{HomeScreen}；
导入{JoinScreen from./screens/JoinScreen'；
从“./screens/HostScreen”导入{HostScreen}；
const Root=StackNavigator(
{
主页：{
屏幕：主屏幕，
},
详情：{
屏幕：JoinScreen，
}
}, 
{
initialRouteName:“主页”，
headerMode:“无”，
}
);
导出默认类App扩展React.Component{
render（）{
返回(
)
}
}

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

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
导出默认类主屏幕扩展React.Component{
render（）{
const{navigate}=this.props.navigation；
返回(
你好，世界
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“周围的空间”，
}
});

我认为如果您更改这一行：

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

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

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

致：

（即，卸下主屏幕周围的支架）然后它就会工作。因为您在

主屏幕

组件的源文件中使用了

导出默认值

，所以不需要导入上的。这是尝试访问组件上名为

主屏幕

的变量，该变量正在解析为

未定义

，并导致您看到的错误

或者，您可以从

export default

中删除

default

，并保持

import

不变。我个人更喜欢删除大括号，因为代码看起来更干净

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

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

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

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

---

但我认为这是一个输入错误；）

我认为react在确定导入内容时遇到了问题
因为默认情况下导出的是一件事 您应该从“./screens/HomeScreen”替换导入{HomeScreen}； import { HomeScreen } from './screens/HomeScreen'; 与

---

从“/screens/HomeScreen”导入主屏幕；如果不导出类，也会发生这种情况

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

导出默认类主屏幕扩展React.Component{
render（）{
返回(
主屏幕
this.props.navigation.navigate（'Details'）}
/>
);
}
}

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

export default MainActivity;


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

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

尝试：

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

主页：{
屏幕：（）=>，
},

保持大括号完整，以便导入外部屏幕文件。只要执行以下操作，它就可以在Android和iOS模拟器上运行

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

---

这解决了我在两种平台上的问题。

既然您提到了默认设置，我想如果您更改这一行：

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

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

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

致：

---

这将解决问题。干杯，伙计

嗨，你能不能详细说明一下你的答案，让它更有意义，更清晰。你救了我一天。我为这个愚蠢的错误感到很愚蠢。谢谢。对我来说，只有来自主屏幕文件的“默认”字修复了它。在导入主屏幕和其他屏幕时，我必须保持App.js中的大括号完好无损。