如何從另一個文件中獲取 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} /> import HomeScreen from './components/HomeScreen'但這給了我一個錯誤，說它不是一個組件。 我知道這是一個簡單的基本問題，但到目前為止我還沒有在任何地方找到答案。 我應該使用不同的導航庫來解決這個問題嗎？

Answer 1

我修好了它。 我試圖做的是給組件值 JSX 樣式，比如component={<HomeScreen />}但它應該只是component={HomeScreen} 。