我正在使用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的后退按钮。有人知道我的导航有什么问题吗?
您在pages.js中使用默认导出,而不是仅将HomeScreen导出为默认切换到:
导出{HomeScreen,ProfileScreen};
因此您可以在app.js中访问它们,并将它们导入为
从'./pages'导入{HomeScreen,ProfileScreen};