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

Question

我正在使用反应原生：0.61.4。

在应用程序中.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;

在页面中.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 模拟器上，应用程序会正确加载并显示主屏幕。 但是，当单击该按钮时，它并没有像应有的那样将我带到ProfileScreen，而是看起来它在堆栈中向前移动到主屏幕的相同页面，除了该页面有一个返回到实际主屏幕的后退按钮。 有人知道我的导航出了什么问题吗？

Answer 1

您在页面中使用默认导出.js而不是仅将主屏幕导出为默认，将其切换为：

export { HomeScreen, ProfileScreen };

因此，您可以在应用程序.js中访问两者，并将它们导入为

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