反應本機導航-路線的組件必須由react組件

Question

我是新來的反應。 我正在嘗試構建簡單的導航系統，但是卻出現錯誤提示：

這是我的代碼。

index.js

import { AppRegistry } from 'react-native';
import HomeNavigator from "./navigations/HomeNavigator";

AppRegistry.registerComponent('enRecover', () => HomeNavigator);

navigations / HomeNavigator.js

import React from 'react';

import {StackNavigator} from 'react-navigation';
import HomeScreen from "../screens/HomeScreen";
import LoginScreen from "../screens/LoginScreen";





const AppStackNavigator = StackNavigator({
    Home: { screen: HomeScreen },
    Profile: { screen: LoginScreen },
    initialRouteName: 'Home',
});

export default class HomeNavigator extends React.Component {
 render() {
    return (
        <AppStackNavigator/>
    );
 }
}

屏幕/ HomeScreen.js

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

export class HomeScreen extends React.Component {

 render() {
    return (
        <View>
            <Text>This is home screen</Text>
            <Button
                onPress={() => this.props.navigation.navigate('LoginScreen')}
                title="Go to another screen"
            />
        </View>
    );
 }
}

屏幕/LoginScreen.js

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

export class LoginScreen extends React.Component {
 render() {
    return (
        <View>
            <Text>This is login screen</Text>
        </View>
    );
 }
}

Answer 1

由於您要導出為named export並將其default導入，因此會引發錯誤。

因此，您需要將其導出為default或fix導入

要么做

import {HomeScreen} from "../screens/HomeScreen";
import {LoginScreen} from "../screens/LoginScreen";

要么

export default class HomeScreen extends React.Component {
export default class LoginScreen extends React.Component {