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上的destructuring。这是尝试访问组件上名为HomeScreen的变量，该变量将解析为undefined并导致您看到的错误。

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

这条线上还有一个缺失的右手括号：

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

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

Answer 2

我认为反应在确定要导入的内容时遇到了问题因为你默认导出一件东西你应该替换

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

与

import  HomeScreen  from './screens/HomeScreen';

Answer 3

尝试：

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

Answer 4

由于您已经提到了默认值，所以我认为如果更改此行：

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

收件人：

import HomeScreen from './screens/HomeScreen';

这可以解决问题。干杯！

Answer 5

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

{{1}}

Answer 6

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

export default MainActivity;


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

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

Answer 7

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

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

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

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

7 个答案: