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

Answer 1

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

export { HomeScreen, ProfileScreen };

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

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

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

Navigation in React Native going to wrong page

react-native

react-native-navigation

react-navigation-stack