React Navigation 指南 7：Drawer navigation

实现抽屉导航如下：

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs

路由配置对象

DrawerNavigatorConfig

• drawerWidth：抽屉的宽度或者返回宽度值的函数
• drawerPosition：抽屉出现的位置，left或right。默认是left位置。
• contentComponent：用于呈现抽屉内容的组件，例如导航项。接收navigation的props。默认为DrawerItems。
• useNativeAnimations：启用动画，默认为true。
• drawerBackgroundColor：抽屉的背景色，默认为true。
• initialRouteName：初始路由名称。
• order：定义路由顺序的routeNames数组。
• paths：提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。（使用场景在前几篇文章有，不再赘述）
• backBehavior：点击后退按钮是否将标签切换到初始选项卡。如果是，则设置为initialRoute，否则none。默认为initialRoute行为。
• contentOptions：配置抽屉内容, DrawerItems的contentOptions属性
  • items – 路由数组，可以修改或覆盖
  • activeItemKey – 激活的路由key
  • activeTintColor – 活动标签的标签和图标颜色
  • activeBackgroundColor – 活动标签的背景颜色
  • inactiveTintColor – 非活动标签的标签和图标颜色
  • inactiveBackgroundColor – 非活动标签的背景颜色
  • onItemPress(route)– 按下某个项目时调用的函数
  • itemsContainerStyle – 内容部分的样式对象
  • itemStyle – 单个项目的样式对象，其中可以包含图标和/或标签
  • labelStyle– Text当你的标签是一个字符串时，样式对象覆盖内容部分的样式
  • activeLabelStyle– 样式对象覆盖Text活动标签的样式，当标签是一个字符串（与labelStyle合并）
  • inactiveLabelStyle– 样式对象覆盖Text不活动标签的样式，当标签是一个字符串（与labelStyle合并）
  • iconContainerStyle– 样式对象来覆盖View图标容器样式。

自定义contentComponent

抽屉的默认组件支持滚动，只包含了RouteConfig中路由的链接。在自定义组件中，可以向抽屉中添加页眉、页脚或其他内容。默认情况下，抽屉支持iphone X安全区域。（SafeAreaView目前官方文档v0.55版本中显示只支持ios，并未支持android机型的刘海屏）

import { DrawerItems, SafeAreaView } from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <ScrollView>
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
  </ScrollView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Screen Navigation Options

title：通用标题可以用作备用headerTitle和drawerLabel
drawerLabel：字符串，React元素或给定的函数({ focused: boolean, tintColor: string })返回React.Node，以显示在抽屉边栏中。未设置时，使用title
drawerIcon：React元素或给定的函数({ focused: boolean, tintColor: string })返回一个React.Node，以显示在抽屉边栏中
drawerLockMode：指定抽屉的lock mode。这也可以通过在顶级路由器上使用screenProps.drawerLockMode动态更新。

示例

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.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('./notif-icon.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,
  },
});

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

要打开和关闭抽屉,navigate toDrawerOpen和DrawerClose。

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

切换抽屉navigate to DrawerToggle

// fires 'DrawerOpen'/'DrawerClose' accordingly
this.props.navigation.navigate('DrawerToggle');