我正在开发一个应用程序,但是goback按钮没有把我带到后面的屏幕。
App.js
import React, { Component } from 'react';
import one from './components/test/one';
import two from './components/test/two';
import three from './components/test/three';
import { DrawerNavigator } from 'react-navigation';
const AppNavigator = DrawerNavigator({
one: {
screen: one,
},
two: {
screen: two,
},
three: {
screen: three,
},
}
);
export default () =>
<AppNavigator />;
组件/测试/ one.js
import React, { Component } from 'react';
import { Button } from 'react-native';
export default class one extends React.Component {
static navigationOptions = {
drawerLabel: 'one',
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('two')}
title="Go to Two"
/>
);
}
}
组件/测试/ two.js
import React, { Component } from 'react';
import { Button } from 'react-native';
export default class two extends React.Component {
static navigationOptions = {
drawerLabel: 'two',
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('three')}
title="Go to 3"
/>
);
}
}
组件/测试/ three.js所
import React, { Component } from 'react';
import { Button } from 'react-native';
export default class three extends React.Component {
static navigationOptions = {
drawerLabel: 'three',
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back to 2"
/>
);
}
}
点击&#34;转到两个&#34; =&GT; &#34;转到3&#34; =&GT; &#34;回到2&#34;。 在屏幕3上,单击&#34;返回2&#34;总是把我带到one.js。
如果我将它们合并到一个文件中,它甚至无法工作。
答案 0 :(得分:6)
您要么使用错误的Navigator
补偿,要么您的要求不明确。基本上,您希望将StackNavigator
用于所需的行为。
问题是,DrawerNavigator
用于构建抽屉菜单。如果从左侧滑动,您将看到包含所有屏幕的导航器抽屉,如下图所示。
如果您在屏幕上添加如下按钮,则会看到您的菜单已打开。
<Button title="MENU" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
结论是,每当我们使用DrawerNavigator
时,我们总是回到初始路由,这是我们定义为第一个项目或使用{{1的第二个参数的initialRouteName
键。 }}。
只有DrawerNavigator
支持您希望实现的堆叠顺序,顾名思义。
您可以做的是在StackNavigator
的其中一个屏幕中包含一个新的StackNavigator
。例如:
DrawerNavigator