DrawerSidebar.js
2.97 KB
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import withCachedChildNavigation from '../../withCachedChildNavigation';
import NavigationActions from '../../NavigationActions';
import invariant from '../../utils/invariant';
import SafeAreaView from '../SafeAreaView';
/**
* Component that renders the sidebar screen of the drawer.
*/
class DrawerSidebar extends React.PureComponent {
_getScreenOptions = routeKey => {
const DrawerScreen = this.props.router.getComponentForRouteName('DrawerClose');
invariant(DrawerScreen.router, 'NavigationComponent with routeName DrawerClose should be a Navigator');
const { [routeKey]: childNavigation } = this.props.childNavigationProps;
return DrawerScreen.router.getScreenOptions(childNavigation.state.index !== undefined // if the child screen is a StackRouter then always show the screen options of its first screen (see #1914)
? {
...childNavigation,
state: { ...childNavigation.state, index: 0 }
} : childNavigation, this.props.screenProps);
};
_getLabel = ({ focused, tintColor, route }) => {
const { drawerLabel, title } = this._getScreenOptions(route.key);
if (drawerLabel) {
return typeof drawerLabel === 'function' ? drawerLabel({ tintColor, focused }) : drawerLabel;
}
if (typeof title === 'string') {
return title;
}
return route.routeName;
};
_renderIcon = ({ focused, tintColor, route }) => {
const { drawerIcon } = this._getScreenOptions(route.key);
if (drawerIcon) {
return typeof drawerIcon === 'function' ? drawerIcon({ tintColor, focused }) : drawerIcon;
}
return null;
};
_onItemPress = ({ route, focused }) => {
this.props.navigation.navigate('DrawerClose');
if (!focused) {
let subAction;
// if the child screen is a StackRouter then always navigate to its first screen (see #1914)
if (route.index !== undefined && route.index !== 0) {
route = route;
subAction = NavigationActions.navigate({
routeName: route.routes[0].routeName
});
}
this.props.navigation.navigate(route.routeName, undefined, subAction);
}
};
render() {
const ContentComponent = this.props.contentComponent;
if (!ContentComponent) {
return null;
}
const { state } = this.props.navigation;
invariant(typeof state.index === 'number', 'should be set');
return <View style={[styles.container, this.props.style]}>
<ContentComponent {...this.props.contentOptions} navigation={this.props.navigation} items={state.routes} activeItemKey={state.routes[state.index] ? state.routes[state.index].key : null} screenProps={this.props.screenProps} getLabel={this._getLabel} renderIcon={this._renderIcon} onItemPress={this._onItemPress} router={this.props.router} drawerPosition={this.props.drawerPosition} />
</View>;
}
}
export default withCachedChildNavigation(DrawerSidebar);
const styles = StyleSheet.create({
container: {
flex: 1
}
});