我怎样才能从另一个文件中获取 React Native 导航加载组件？

Question

我正在尝试学习 React Native 导航。这是我的 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 文件中定义了 HomeScreen。但是如果我想将它定义为另一个文件中的独立组件（比如 HomeScreen.js）怎么办，就像这样 -

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;

如何在 App.js 中导入和使用 HomeScreen？我试过 import HomeScreen from './components/HomeScreen' 和 <Stack.Screen name="Home" component={HomeScreen} /> 但这给了我一个错误，说它不是一个组件。我知道这是一个简单的基本问题，但到目前为止，我无法在任何地方找到答案。我应该使用其他导航库来解决这个问题吗？

Answer 1

我修好了。我试图做的是给组件值 JSX 样式，比如 component={<HomeScreen />} 但它应该只是 component={HomeScreen}.

我怎样才能从另一个文件中获取 React Native 导航加载组件？

How can I have React Native navigation load component from another file?

javascript

react-native

react-native-navigation