React Native导航Navigator组件基本使用方法

导航组件Navigator可以让我们客户端在不同的页面见进行切换。为了达到这样的功能，Navigator提供了路由对象功能进行区分识别每一个页面。同时我们可以通过renderScene方法，Navaigator根据指定的路由进行渲染指定的界面。

除了以上功能之外，为了改变页面切换的动画或者页面的手势，该组件还提供configureScene属性来进行获取指定路由页面的配置对象信息。对于页面切换动画或者更多的屏幕配置选项信息详情可以查看Navigator.SceneConfigs

属性

configureScene function

可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前的路由，一个是当前的路由栈。然后它应当返回一个场景配置对象

(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

Navigator.SceneConfigs.PushFromRight (默认)
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

导航方法

如果你得到了一个navigator对象的引用，则可以调用许多方法来进行导航：

getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
jumpTo(route) - 跳转到已有的场景并且不卸载。
push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
pop() - 跳转回去并且卸载掉当前场景
replace(route) - 用一个新的路由替换掉当前场景
replaceAtIndex(route, index) - 替换掉指定序列的路由场景
replacePrevious(route) - 替换掉之前的场景
resetTo(route) - 跳转到新的场景，并且重置整个路由栈
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载。
popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。   

导航器属性风格

configureScene  function 方法，该为可选的方法进行配置页面切换动画和手势。该会通过路由和路由栈两个参数调用，进行返回一个页面参数配置对象：(route, routeStack) => Navigator.SceneConfigs.FloatFromRight


initialRouteStack  [object] 参数对象数组   该是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组

navigationBar  node  该为可选的参数，在页面切换中用来提供一个导航栏

navigator object   该为可选参数，可以从父类导航器中获取导航器对象

onDidFoucs  function  该方法已经废弃，我们可以使用navigationContext.addListener('didfocus',callback)方法进行替代。该会在每次页面切换完成或者初始化之后进行调用该方法。该参数为新页面的路由

onWillFocus function  该方法已经废弃，我们可以使用navigationContext.addListener('willfocus',callback)方法进行替代。该会页面每次进行切换之前调用

renderScene  function  该为必须调用的方法，该用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数，具体是方法如下:(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />

对于一个导航组件，最基本的就是下面几个点：

• 进入下一个界面
• 返回上一个界面
• 传递数据给下一个界面
• 返回数据给上一个界面

可以参考

Navigator组件基本使用方法

React Native 中文网推荐 新手理解Navigator