react-navigation-2.x使用.md

React Navigation 2.X 的使用

更新于 2018.11.08

目录 [TOC]

---

Navigation Props

• this.props.navigation
  • navigate - 跳转到另一个屏幕

  1. navigation.navigate({ routeName, params, action, key })
  2. navigation.navigate(routeName, params, action)

  • goBack - 关闭当前屏幕并返回上一个屏幕
  • addListener - 添加对路由的监听
  • isFocused
  • state
  • setParams
  • getParam
  • dispatch
  • dangerouslyGetParent

• 如果是StackNavigator, this.props.navigation还有如下方法
  • push
  • pop
  • popToTop
  • replace
  • reset
  • dismiss

• 如果是DrawerNavigator, this.props.navigation还有如下方法
  • openDrawer
  • closeDrawer
  • toggleDrawer

Navigation Actions

import { NavigationActions } from 'react-navigation';

• navigate

• back

• setParams

Stack Actions

import { StackActions } from 'react-navigation';

• reset

• replace

• push

• pop

• popToTop

Drawer Actions

import { DrawerActions } from 'react-navigation-drawer';

• openDrawer - 打开抽屉

  this.props.navigation.dispatch(DrawerActions.openDrawer());

• closeDrawer - 关闭抽屉

  this.props.navigation.dispatch(DrawerActions.closeDrawer());

• toggleDrawer - 切换抽屉

  this.props.navigation.dispatch(DrawerActions.toggleDrawer());

createStackNavigator

createStackNavigator(RouteConfigs, StackNavigatorConfig);

RouteConfigs

• screen
• path
• navigationOptions
  • title
  • header
  • headerTitle
  • headerTitleAllowFontScaling
  • headerBackImage
  • headerBackTitle
  • headerTruncatedBackTitle
  • headerRight
  • headerLeft
  • headerStyle
  • headerForceInset
  • headerTitleStyle
  • headerBackTitleStyle
  • headerLeftContainerStyle
  • headerRightContainerStyle
  • headerTitleContainerStyle
  • headerTintColor
  • headerPressColorAndroid
  • headerTransparent
  • headerBackground
  • gesturesEnabled
  • gestureResponseDistance
    • horizontal
    • vertical
  • gestureDirection

StackNavigatorConfig

• initialRouteName
• initialRouteParams
• initialRouteKey
• navigationOptions
• paths
• mode
  • card
  • modal
• headerMode
  • float
  • screen
  • none
• headerBackTitleVisible
• headerTransitionPreset
• headerLayoutPreset
• cardStyle
• transitionConfig
  • transitionProps
  • prevTransitionProps
  • isModal
• onTransitionStart
• onTransitionEnd
• transparentCard

Navigator Props

const SomeStack = createStackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

createSwitchNavigator

createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);

RouteConfigs - 同createStackNavigator的RouteConfigs

SwitchNavigatorConfig

• initialRouteName
• resetOnBlur
• paths
• backBehavior

createDrawerNavigator

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

RouteConfigs - 同createStackNavigator的RouteConfigs

• navigationOptions
  • title
  • drawerLabel
  • drawerIcon
  • drawerLockMode

DrawerNavigatorConfig

• drawerWidth
• drawerPosition
• contentComponent
  • items
  • activeItemKey
  • activeTintColor
  • activeBackgroundColor
  • inactiveTintColor
  • inactiveBackgroundColor
  • onItemPress(route)
  • itemsContainerStyle
  • itemStyle
  • labelStyle
  • activeLabelStyle
  • inactiveLabelStyle
  • iconContainerStyle
• contentOptions
• useNativeAnimations
• drawerBackgroundColor
• initialRouteName
• order
• paths
• backBehavior

createTabNavigator

createTabNavigator(RouteConfigs, TabNavigatorConfig);

RouteConfigs - 同createStackNavigator的RouteConfigs

• navigationOptions
  • title
  • tabBarVisible
  • swipeEnabled
  • tabBarIcon
  • tabBarLabel
  • tabBarOnPress

TabNavigatorConfig

• tabBarComponent
  • TabBarBottom - (IOS默认)
    • tabBarOptions
      • activeTintColor
      • activeBackgroundColor
      • inactiveTintColor
      • inactiveBackgroundColor
      • showLabel
      • style
      • labelStyle
      • tabStyle
      • allowFontScaling
      • safeAreaInset
  • TabBarTop - (Android默认)
    • tabBarOptions
      • activeTintColor
      • inactiveTintColor
      • showIcon
      • showLabel
      • upperCaseLabel
      • pressColor
      • pressOpacity
      • scrollEnabled
      • tabStyle
      • indicatorStyle
      • labelStyle
      • iconStyle
      • style
      • allowFontScaling
• tabBarPosition
• swipeEnabled
• animationEnabled
• lazy
• removeClippedSubviews
• initialLayout
• tabBarOptions
• initialRouteName
• order
• paths
• backBehavior

createBottomTabNavigator

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

RouteConfigs - 同createStackNavigator的RouteConfigs

• navigationOptions
  • title
  • tabBarVisible
  • tabBarIcon
  • tabBarLabel
  • tabBarButtonComponent
  • tabBarAccessibilityLabel
  • tabBarTestID
  • tabBarOnPress

BottomTabNavigatorConfig

• initialRouteName
• order
• paths
• backBehavior
• tabBarComponent
• tabBarOptions
  • activeTintColor
  • activeBackgroundColor
  • inactiveTintColor
  • inactiveBackgroundColor
  • showLabel
  • showIcon
  • style
  • labelStyle
  • tabStyle
  • allowFontScaling
  • safeAreaInset

createMaterialBottomTabNavigator

npm install react-navigation-material-bottom-tabs

createMaterialBottomTabNavigator(RouteConfigs, MaterialBottomTabNavigatorConfig);

createMaterialTopTabNavigator

withNavigation

withNavigationFocus

NavigationEvents

实战