More than code
Welcome to the website

React Navigation 指南 7:Drawer navigation

实现抽屉导航如下:

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs

路由配置对象

DrawerNavigatorConfig

  • drawerWidth:抽屉的宽度或者返回宽度值的函数
  • drawerPosition:抽屉出现的位置,leftright。默认是left位置。
  • contentComponent:用于呈现抽屉内容的组件,例如导航项。接收navigation的props。默认为DrawerItems。
  • useNativeAnimations:启用动画,默认为true
  • drawerBackgroundColor:抽屉的背景色,默认为true
  • initialRouteName:初始路由名称。
  • order:定义路由顺序的routeNames数组。
  • paths:提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。(使用场景在前几篇文章有,不再赘述)
  • backBehavior:点击后退按钮是否将标签切换到初始选项卡。如果是,则设置为initialRoute,否则none。默认为initialRoute行为。
  • contentOptions:配置抽屉内容, DrawerItemscontentOptions属性
    • 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:通用标题可以用作备用headerTitledrawerLabel
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 toDrawerOpenDrawerClose

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');
赞(3) 打赏
未经允许不得转载:李帅帅空间 » React Navigation 指南 7:Drawer navigation

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏