抽屉导航
这种导航方法提供了一种通过抽屉直接在不同屏幕之间切换的方法。此滑动抽屉包含指向应用程序不同屏幕的链接。
堆栈导航
这种导航器提供了一种在屏幕之间转换和管理导航历史的方法。单击按钮或链接时,会在旧屏幕之上放置一个新屏幕。这有点像 push on pop of a stack。用户可以通过后退按钮一一返回到以前的屏幕。
因此,为了能够向后导航,您至少必须在另一个屏幕上放置一个屏幕,因此在您使用抽屉导航的初始页面上,您将无法返回。
以上面的例子为例,你不能从screen1回到user,或者从screen2回到menu。您必须遵循堆栈导航器流程。例如:
然后你可以回去
现在让我们跳到一个使用上图的真实示例:
应用程序.js
import React, { Component } from 'react';
import { View, Text, TouchableHighlight, Image } from 'react-native';
import { DrawerNavigator, createStackNavigator } from 'react-navigation';
import Menu from './pages/Menu/Menu';
import Screen1 from './pages/Menu/Screen1';
import Screen4 from './pages/Menu/Screen4';
import User from './pages/User/User';
import Screen2 from './pages/User/Screen2';
import Screen5 from './pages/User/Screen5';
import Login from './pages/Login/Login';
import Screen3 from './pages/Login/Screen3';
import Screen6 from './pages/Login/Screen6';
const MenuStack = createStackNavigator(
{
Menu: {
screen: Menu,
navigationOptions: {
header: null,
},
},
Screen1: {
screen: Screen1,
},
Screen4: {
screen: Screen4,
},
},
{
initialRouteName: 'Menu',
}
);
const UserStack = createStackNavigator(
{
User: {
screen: User,
navigationOptions: {
header: null,
},
},
Screen2: {
screen: Screen2,
},
Screen5: {
screen: Screen5,
},
},
{
initialRouteName: 'User',
}
);
const LoginStack = createStackNavigator(
{
Login: {
screen: Login,
navigationOptions: {
header: null,
},
},
Screen3: {
screen: Screen3,
},
Screen6: {
screen: Screen6,
},
},
{
initialRouteName: 'Login',
}
);
export default DrawerNavigator(
{
Menu: {
screen: MenuStack,
},
Info: {
screen: UserStack,
},
Login: {
screen: LoginStack,
},
},
{
initialRouteName: 'Menu',
}
);
Menu.js、User.js、Login.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Header from '../../Header';
export default class MenuScreen extends Component {
render() {
return (
<View
style={{
flex: 1,
flexDirection: 'column',
}}>
<Header {...this.props} />
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{ fontWeight: 'bold', fontSize: 22 }}>
This is Menu Screen
</Text>
<Button
title="Go to Screen1"
onPress={() => this.props.navigation.navigate('Screen1')}
/>
</View>
</View>
);
}
}
Screen1.js、Screen2.js、Screen3.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export default class Screen2 extends Component {
render() {
return (
<View
style={{
flex: 1,
flexDirection: 'column',
}}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{ fontWeight: 'bold', fontSize: 22 }}>
This is Screen2
</Text>
<Button
title="Go to Screen5"
onPress={() => this.props.navigation.navigate('Screen5')}
/>
<Button
title="Go to Back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
</View>
);
}
}
Screen4.js、Screen5.js、Screen6.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export default class Screen4 extends Component {
render() {
return (
<View
style={{
flex: 1,
flexDirection: 'column',
}}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{ fontWeight: 'bold', fontSize: 22 }}>
This is Screen4
</Text>
<Button
title="Go to Back"
onPress={() => this.props.navigation.goBack()}
/>
</View>
</View>
);
}
}
查看源代码:snack.expo.io/@abranhe/react-navigation。