REACT NAVIGATION August 29, 2018

【React Navigation】八、createDrawerNavigator-抽屉导航器

Words count 6.6k Reading time 6 mins. Read count 0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React from 'react';
import { Text, View, Button, Image, StyleSheet } from 'react-native';
import { createDrawerNavigator } from 'react-navigation';

class MyHomeScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./icon_no_pigai.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};

render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}

class MyNotificationsScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Notifications',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./icon_no_pigai.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};

render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}

const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
});

export default createDrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});
  1. 可以通过以下api打开或者关闭抽屉

    1
    2
    this.props.navigation.openDrawer();
    this.props.navigation.closeDrawer();
  2. 反转

    1
    this.props.navigation.toggleDrawer();
  3. 另一种调用方式

    1
    2
    3
    this.props.navigation.dispatch(DrawerActions.openDrawer());
    this.props.navigation.dispatch(DrawerActions.closeDrawer());
    this.props.navigation.dispatch(DrawerActions.toggleDrawer());
0%