StackNavigator、TabNavigator详解

StackNavigator

StackNavigator是最常用的导航器，用于普通页面的分页，它包括路由配置和初始化(StackNavigatorConfig)的设置，简单的配置如下：

const AppNavigator = StackNavigator({
  '/': {
    getScreen: () => require('./Home').default
  },
  '/settings': {
    getScreen: () => require('./Settings').default
  },
  '/account': {
    getScreen: () => require('./Account').default
  }
}, {
  headerMode: 'screen',
  initialRouteName: '/',
  mode: 'modal',
  navigationOptions: {
    headerStyle: {
      backgroundColor: '#fff'
    }
  }
});

StackNavigatorConfig 属性介绍

• initialRouteName: 页面默认进入的路由。
• initialRouteParams: 默认路由所携带的参数。
• paths: 此参数在app之间跳转起作用。
• mode: 转场动画，card表示切换页面时是左右动画，modal表示切换页面时的动画是从下往上，该属性只在ios上起作用。
• navigationOptions: (Screen Navigation Options)场景初始化参数，一般我们可以在某个场景的组件中声明，可覆盖最外层navigationOptions配置：

class Document extends Component {
    static navigationOptions = ({ navigation: { navigate, goBack, state: { params } } }) => {
    return {
      mode: 'card',
      headerTitle: ,
      headerLeft: ,
      headerRight: 
    };
  };

Screen Navigation Options属性介绍

• title: 只能是string类型。
• header: 如果两个场景对应的是同一个react element，需要将该属性置为null，否则会出现两个头部。
• headerTitle: 当场景的头部是一个组件时，需要用到这个属性。
• headerTitleStyle: Android下，title默认靠左，如下设置可使title居中显示：

headerTitleStyle: {
    alignSelf: 'center'
  }

• headerLeft: 定义头部栏左边的组件。
• headerRight: 定义头部栏右边的组件。
• gesturesEnabled: 在该屏幕内手势是否可用。

TabNavigator

TabNavigator封装了tabBar，用于同一屏幕切换不同页面。简单配置如下：

const HomeNavigator = TabNavigator({
  notification: {
    screen: require('./Home/Notification').default
  },
  desktop: {
    screen: require('./Home/Desktop').default
  },
  recent: {
    screen: require('./Home/Recent').default
  },
  starred: {
    screen: require('./Home/Starred').default
  }
}, {
  lazy: true,
  order: ['notification', 'desktop', 'recent', 'starred'],
  initialRouteName: 'desktop',
  tabBarOptions: {
    showLabel: false,
    showIcon: true,
    tabStyle: {
      padding: 0
    },
    iconStyle: {
      height: 50
    }
  },
  headerMode: 'none',
  tabBarPosition: 'bottom',
  animationEnabled: false,
  navigationOptions: {
    ...
  }
});

TabNavigatorConfig属性介绍

• lazy: 依赖加载。
• order: tab bar 的顺序。
• tabBarPosition: tab bar的位置，ios默认为bottom，android默认为top。
• animationEnabled:切换tab的时候是否带动画。
• tabBarOptions: x场景初始化参数。

tabBarOptions 属性介绍

• style: tab bar 样式。
• labelStyle: tab label 样式。
• iconStyle: tab icon 样式。
• activeTintColor / inactiveTintColor: 选中/未选中tab的颜色。
• indicatorStyle: tab的下方是否有线条，该属性只用于android，默认为true。