React Native 导航（Navigator）详解——属性篇

来源：互联网发布：不配说爱我dj网络歌手编辑：程序博客网时间：2024/06/05 22:55

导航组件就是控制页面的切换、跳转功能，通过操作内存的路由栈，显示不同的页面。也可以给页面加上切换效果，运用到不同的场景。

1》configureScene设置切换动画，可取值：

Navigator.SceneConfigs.PushFromRight (default)

Navigator.SceneConfigs.FloatFromRight

Navigator.SceneConfigs.FloatFromLeft

Navigator.SceneConfigs.FloatFromBottom

Navigator.SceneConfigs.FloatFromBottomAndroid

Navigator.SceneConfigs.FadeAndroid

Navigator.SceneConfigs.HorizontalSwipeJump

Navigator.SceneConfigs.HorizontalSwipeJumpFromRight

Navigator.SceneConfigs.VerticalUpSwipeJump

Navigator.SceneConfigs.VerticalDownSwipeJump

用法：
configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}

2》initialRoute 初始化首页

设置首先显示的页面，如果不设置默认首先显示路由栈中最后一个页面。

用法：

initialRoute={routes[0]}

3》initialRouteStack 初始化路由栈

传入一个路由数组，如果不设置，默认路由栈中只有initialRoute设置的一个页面

用法：

initialRouteStack={routes}

4》navigationBar 头部固定导航栏

分为三部分：LeftButton、RightButton、Title。

用法：

navigationBar={
     <Navigator.NavigationBar
       routeMapper={{
         LeftButton: (route, navigator, index, navState) =>
          {...},
         RightButton: (route, navigator, index, navState) =>
          {...},
         Title: (route, navigator, index, navState) =>
          {...}
       }}
     />
  }

5》navigator 传递父导航对象

用法：

navigator={navigator}

6》onDidFocus 页面切换完成时调用

用法：

onDidFocus={(route, navigator)=>...}

7》onWillFocus 页面将要切换时调用

用法：

onWillFocus={(route, navigator)=>...}

8》renderScene 渲染页面

用法：

renderScene={(route, navigator) =>...}

9》sceneStyle 给所有页面设置样式

用法：

sceneStyle={{paddingTop: (Platform.OS=== 'android' ?66 : 74)}}

0 0