ReactNavigation2.x版本使用手册

createStackNavigator

为应用程序提供一种在每个新屏幕放置在堆栈顶部的屏幕之间转换的方法。

stack navigator 默认为 iOS 和 Android 效果：iOS右侧滑入，Android底部淡入。

API 语法

createStackNavigator(RouteConfigs, StackNavigatorConfig);

RouteConfigs

• screen - 对应界面名称，是一个React组件
• path - 深度链接路径，从其他App或者Web跳转到该App需要设置该路径
• navigationOptions - 用于屏幕的默认导航选项
  • title 可用作 headerBackTitle 的标题。此外，将用作 tabBarLabel（如果嵌套在TabNavigator中）或 drawerLabel（如果嵌套在DrawerNavigator中）的回退标题
  • header React元素，用来作为标题。设置 null 隐藏标题
  • headerTitle 可使用 String，React Element，React Component。默认 title 作为标题。当使用 Component 时，接受 allowFontScaling，style 和children 作为属性。title 会被放在 children 中
  • headerBackTitle 返回标题，默认为 title
  • headerTruncatedBackTitle 返回标题不能显示时（比如返回标题太长了）显示此标题，默认为'Back'
  • headerRight 头部右边组件
  • headerLeft 头部左边组件
  • headerStyle 头部组件的样式
  • headerTitleStyle 头部标题的样式
  • headerBackTitleStyle 头部返回标题的样式
  • headerTintColor 头部颜色
  • headerPressColorAndroid Android 5.0 以上MD风格的波纹颜色
  • gesturesEnabled 是否能侧滑返回，iOS 默认 true，Android 默认 false

StackNavigatorConfig

• 可选的路由属性

  • initialRouteName - 设置默认屏幕。必须为路由配置中的某个screen。
  • initialRouteParams - 初始路由路线的参数。
  • navigationOptions - 用于屏幕的默认导航选项。
  • paths - 覆盖路由配置中设置的路径的映射。

• 可选的视觉选项

  • mode 定义渲染和转换的样式
    • card 使用标准的iOS和Android屏幕转换。iOS左右切换，Android底部划入。默认。
    • modal 屏幕从底部滑入，只适用于iOS，对Android没有影响。
  • headerMode 定义如何呈现标题
    • float 在屏幕更改时渲染保留在顶部的单个标题和动画。iOS 默认效果。
    • screen 每个屏幕都附有一个标题，标题与屏幕一起淡入和淡出。Android 默认效果
    • none 不会显示标题。
  • headerTransitionPreset 指定标题在 headerMode: float 启用时应该如何从一个屏幕切换到另一个屏幕。
    • fade-in-place 标题组件在不移动的情况下淡入淡出，类似于iOS的Twitter，Instagram和Facebook应用程序。这是默认值。
    • uikit iOS的默认效果。
  • cardStyle 使用此道具覆盖或扩展堆栈中单个卡的默认样式。
  • transitionConfig 函数返回与默认屏幕转换合并的对象。提供的函数将传递以下参数：
    • transitionProps 新屏幕的过渡转换。
    • prevTransitionProps 旧屏幕的过渡转换。
    • isModal 指定屏幕是否为模态。
  • onTransitionStart 跳转动画即将开始时要调用的函数。
  • onTransitionEnd 跳转动画完成后调用的函数。

createBottomTabNavigator

屏幕底部的简单标签栏，可在不同路由之间切换。路由是懒加载的（屏幕组件直到第一次选中时才会初始化） 这个方法在 1.x 中叫做 TabNavigator，在 2.x 中统一命名为 createBottomTabNavigator

API语法

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

RouteConfigs

• screen - 对应界面名称，是一个React组件
• path - 深度链接路径，从其他App或者Web跳转到该App需要设置该路径
• navigationOptions - 用于屏幕的默认导航选项
  • title 通用标题可以用作 headerTitle 和 tabBarLabel
  • tabBarVisible 显示或隐藏底部标签栏，默认为 true，不隐藏。
  • tabBarIcon React Element 或使用函数 function({focused：boolean，tintColor：string}) 返回一个 React.Node。
  • tabBarLabel 可使用 String、React Element 或者传入 {focused：boolean，tintColor：string} 属性的函数并返回一个 React.Node。如果未定义，会使用 title 作为默认值。如果想要隐藏，可参考 tabBarOptions.showLabel。
  • tabBarOnPress 标签栏点击事件回调，接受一个对象，如下：
    {
      defaultHandle: f defaultHandle()
      navigation: {goBack: f, navigate: f, setParams: f, pop: f, popToTop: f, ...}
    }
    

BottomTabNavigatorConfig

• initialRouteName - 第一次加载时初始选项卡路由的 routeName。
• order 定义选项卡顺序的routeNames数组。
• paths 提供 routeName 到 path 的深度链接，会覆盖 RouteConfigs 中设置的路径。
• backBehavior 后退按钮是否会导致标签切换到初始路由。initialRoute 会导致，默认； none 不会导致
• tabBarComponent 覆盖用作标签栏的组件。
• tabBarOptions 标签栏属性：
  • activeTintColor 活动选项卡的标签和图标颜色。(选中)
  • activeBackgroundColor 活动选项卡的背景颜色。(选中)
  • inactiveTintColor 非活动选项卡的标签和图标颜色。(未选中)
  • inactiveBackgroundColor 非活动选项卡的背景颜色。(未选中)
  • showLabel 是否显示标签，默认 true。
  • style 标签栏的样式。
  • labelStyle 标签栏文字的样式。
  • tabStyle 选项卡的样式。
  • allowFontScaling 标题字体是否应该缩放以遵循系统设置。默认 true。

createMaterialBottomTabNavigator

方法在正式版2.X中废弃，使用 material 风格需要安装 react-navigation-material-bottom-tabs、react-native-paper 和 react-native-vector-icons

react-native-material-bottom-navigation

屏幕底部的 Material 设计主题标签栏，可在不同路由之间切换。路由懒加载(屏幕组件只在第一次获取焦点时才被加载）。

API语法

createMaterialBottomTabNavigator(RouteConfigs, MaterialBottomTabNavigatorConfig);