React Native 中的导航转到错误的页面

Question

我正在使用 react-native: 0.61.4。

在 app.js 我有

import React from 'react';
import { View, Text } from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import HomeScreen from './pages';
import ProfileScreen from './pages';

const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Profile: {screen: ProfileScreen}
});

const App = createAppContainer(MainNavigator);

export default App;

在 pages.js 我有

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

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Main Page',
  };
  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={{flex: 1}}>
        <Text>You are on the main Page</Text>
        <Button
          title="Go to Profile"
          onPress={() => navigate('Profile')}
        />
      </View>
    );
  }
}

class ProfileScreen extends React.Component {
  static navigationOptions = {
    title: 'Profile',
  };
  render() {
    return (
      <View style={{flex: 1}}>
        <Text>You are on the profile page</Text>
      </View>
    );
  }
}

在 IOS 模拟器上，应用程序正确加载并显示 HomeScreen。但是，当单击该按钮时，它并没有像应有的那样将我带到 ProfileScreen，而是在堆栈中向前移动到 HomeScreen 的相同页面，除了该页面具有返回到实际 HomeScreen 的后退按钮。有人知道我的导航出了什么问题吗？

Answer 1

您在 pages.js 中使用默认导出，而不是仅将 HomeScreen 作为默认导出切换到：

export { HomeScreen, ProfileScreen };

所以你可以在 app.js 中访问它们，并将它们导入为

import { HomeScreen, ProfileScreen } from './pages';