React Navigation（六）-createDrawerNavigator(API)

原文链接

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs

该对象是路由名称与路由配置的映射。

DrawerNavigatorConfig

• drawerWidth - 侧滑栏的宽度，或者返回该宽度的函数.
• drawerPosition - 选项是 left 或者 right. 默认是 left .
• contentComponent - 用来渲染侧滑栏内容的组件, 例如, navigation items. 接收 navigation 属性. 默认是 DrawerItems. 更多信息往下看.
• contentOptions - 侧滑栏内容配置, 往下看.
• useNativeAnimations - 是否适用 native animations. 默认 true.
• drawerBackgroundColor - Use the Drawer background for some color. 默认是 white.

传递到下层路由器的一些选项，可以修改路由逻辑:

• initialRouteName - 初始路由名称.
• order - 定义了侧滑栏items顺序的路由名称数组.
• paths - 路由名称与路由配置的映射, 覆盖第一个参数的设置.
• backBehavior - 点击返回按钮是否切换到初始路由? 如果是, 设置成 initialRoute, 否则设置 none. 默认是 initialRoute .

自定义的内容组件 contentComponent

侧滑栏的默认内容组件是可滚动的，只包括RouteConfig中指定的路由链接。你可以通过添加头 尾或者其他内容来简单覆盖默认组件。侧滑栏默认是可滚动的，并且支持iPhone X安全区域。如果你自定义内容，确保在SafeAreaView帐包裹内容组件：

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,
  },
});

DrawerItems的contentOptions 

• items - 路由数组, 可以被修改或覆盖
• activeItemKey - 识别当前活动路由的key
• activeTintColor - 活动标签的标签与图标颜色
• activeBackgroundColor - 活动标签的背景颜色
• inactiveTintColor - 非活动标签的标签与图标颜色
• inactiveBackgroundColor - 非活动标签的背景颜色
• onItemPress(route) - item被点击的函数
• itemsContainerStyle - content部分的style
• itemStyle - 单个item的style, 每个item可以包含一个图标与/或一个标签
• labelStyle - 如果标签是字符串，该属性可以覆盖content内Text的style
• activeLabelStyle - 如果标签是字符串，该属性可以覆盖活动标签的Text的style (与 labelStyle合并)
• inactiveLabelStyle - 如果标签是字符串，该属性可以覆盖非活动标签的Text的style  (与labelStyle合并)
• iconContainerStyle - 覆盖 View 图标容器的styles.

contentOptions: {
  activeTintColor: '#e91e63',
  itemsContainerStyle: {
    marginVertical: 0,
  },
  iconContainerStyle: {
    opacity: 1
  }
}

Screen Navigation Options

title

headerTitle和drawerLable的通用备选标题

drawerLabel

字符，react元素或者返回一个React.Node的函数，函数要有{focused：boolean，tintColor：string}，显示在侧边栏中，如果没有定义则显示title

drawerIcon

同上

drawerLockMode

指定侧边栏的锁定模式。也可以在顶层路由器中使用screenProps.drawLockMode来动态修改。

嵌套的侧边栏

如果侧边栏导航器嵌套在有UI的其他导航器中，比如tabNavigator或者stackNavigator，侧边栏在这些UI的下方被渲染。侧边栏回出现在tab bar的下方，或者header下方。如果侧边栏要在这些UI上层渲染，那么要使侧边栏导航器成为其他导航器的父类。