React Native 错误：路由组件必须是 React 组件

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,
}

我查看了其他堆栈溢出解决方案，但是在我的情况下，它们似乎都不适用，所以在这里我做错了什么？

我的 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);

>

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

您正在关注的视频确实很旧，可能不再是最新的。请遵循安装指南，然后按照本指南。这应该可以让您在几分钟内启动并运行。