Javascript 如何从另一个文件加载本机导航组件？

我正在努力学习母语导航。这是我的App.js，它工作正常，正如预期的那样：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

class App extends Component {

  HomeScreen() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }

  render() {
    return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={this.HomeScreen} />
          </Stack.Navigator>
        </NavigationContainer>
    )
  }
}

const Stack = createStackNavigator();

export default App;

---

如何在App.js中导入和使用该

主屏幕

？我曾尝试从“./components/HomeScreen”和“

导入主屏幕，但这给了我一个错误，说它不是一个组件。我知道这是一个简单、基本的问题，但到目前为止我还没有找到答案。是否有其他导航库可用于解决此问题？

我已将其修复。我想做的是给出组件值JSX样式，比如

component={}

，但是它应该是

component={HomeScreen}

，我修正了它。我想做的是给出组件值JSX样式，比如

component={}

，但它应该是

component={HomeScreen}

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class HomeScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    )
  }
}

export default HomeScreen;