反应原生导航 - 路径的组件必须通过反应组件

Question

我是新手做出反应。我正在尝试构建简单的导航系统，但我得到了流量错误：

这是我的代码。

index.js

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

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

导航/ 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 {