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

问题描述 投票:0回答:1

我正在使用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的后退按钮。有人知道我的导航有什么问题吗?

react-native react-native-navigation react-navigation-stack
1个回答
1
投票

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

导出{HomeScreen,ProfileScreen};

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

从'./pages'导入{HomeScreen,ProfileScreen};

© www.soinside.com 2019 - 2024. All rights reserved.