React Native Error: The component for route must be a React component

Question

我正在尝试为 React 导航创建一个基本设置，但出于某种原因，当我查看项目时，出现空白屏幕和终端错误：

Error: The component for route 'screens' must be a React component. For example:

import MyScreen from './MyScreen';
...
screens: MyScreen,
}

You can also use a navigator:

import MyNavigator from './MyNavigator';
...
screens: MyNavigator,
}

我查看了其他 Stack Overflow 解决方案，但其中 none 似乎适用于我的情况，那么，我在这里做错了什么吗？

我的App.js（这里也是导入字体，不过这些都行，好像是路由的问题）

import React, {useState} from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import Navigator from './routes/homeStack';

const getFonts = () => Font.loadAsync({
    'raleway-regular': require('./assets/fonts/Raleway-Regular.ttf'),
    'raleway-bold': require('./assets/fonts/Raleway-Bold.ttf')
  });
export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);
  
  if (fontsLoaded) {
    return (
      <Navigator />
    );
  } else {
    return (
      <AppLoading
        startAsync= {getFonts}
        onFinish= {()=> setFontsLoaded(true)}
        onError= {()=> console.log('error')} 
      />
    );
  }
}

homeStack.js

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import Scanner from '../screens/scanner';

const screens = {
    Home: {
        screen: Home
    },
    Scanner: {
        screen: Scanner
    },
};

const HomeStack = createStackNavigator({screens});
export default createAppContainer(HomeStack);

home.js

import React from 'react';
import { StyleSheet, View, Text, } from 'react-native';
import { globalStyles } from '../styles/global';

export default function Home() {
  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.titleText}>Home Screen</Text>
    </View>
  );
}

scanner.js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { globalStyles } from '../styles/global';

export default function Scanner() {
  return (
    <View style={globalStyles.container}>
      <Text>About Screen</Text>
    </View>
  );
}

我的文件目录

如有任何帮助，我们将不胜感激！

Answer 1

您正在关注的视频真的很旧，可能不再是最新的了。请遵循 installation guides and then follow along this 指南。这应该会让你在几分钟内起床运行。

React Native Error: The component for route must be a React component

React Native Error: The component for route must be a React component

javascript

routes

reactjs

react-native

react-navigation