前言

在前端的开发中，我们需要实现多个页面的切换跳转，iOS中使用Navigation实现页面的跳转，react Native中使用Navigator和NavigatorIOS来实现不同页面间的切换。

一。实现原理及属性

导航器通过路由对象来分辨不同的场景，利用renderScene方法，导航栏可以根据指定的路由来渲染场景。

1.1导航跳转方法

react中的路由的存储方式通过栈来存储的，有先进后出的特性。

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到栈中的第一个场景，卸载掉所有的其他场景。

1.2导航属性

configureScene  = {（） =>{

return Navigator. SceneConfigs .HorizontalSwipeJump;

}}

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

场景配置对象：

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

  initialRoute ={{ name: 'home', component: HomeScene }}

定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项。

initialRouteStack      [object]

提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有initialRoute的数组。

renderScene  function  (route, navigator) =><mySceneComponet title={route.title} navigator = {navigator}> 

两个参数中的route包含的是initial的时候传递的name和component，而navigator是一个我们需要用的Navigator的对象；

所以当我们拿到route中的component的时候，我们就可以将navigator传递给它，正因为如此，我们的组件HomeScene才可以通过  this.props.navigator，拿到路由。

navigationBar    node

可选参数，提供一个在场景切换的时候保持的导航栏。

navigator    object

可选参数，提供从父导航器获得的导航器对象。

onDidFocus    function

每当导航切换完成或初始化之后，调用此回调，参数为新场景的路由。

onWillFocus   function

会在导航切换之前调用，参数为目标路由。

sceneStyle  和View的属性样式一样

将会应用在每个场景的容器上的样式。

1.3默认写法

<Navigator

initialRoute={{name:defaultName,component:defaultComponent}}

configureScene={(route) => {

returnNavigator.SceneConfigs.HorizontalSwipeJumpFromRight;

}}

renderScene={(route,navigator) => {

letComponent=route.component;

return

}}

/>

二、Navigator.IOS

NavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。

2.1  常用的导航器方法

push(route)

导航器跳转到一个新的路由。

pop()

回到上一页。

popN(n)

回到N页之前。当N=1的时候，效果和 pop() 一样。

replace(route)

替换当前页的路由，并立即加载新路由的视图。

replacePrevious(route)

替换上一页的路由/视图。

replacePreviousAndPop(route)

替换上一页的路由/视图并且立刻切换回上一页。

resetTo(route)

替换最顶级的路由并且回到它。

popToRoute(route)

一直回到某个指定的路由。

popToTop()

回到最顶层的路由。

2.2  常用的属性

barTintColor string

导航条的背景颜色。

initialRoute{

component: function,   // 路由到对应的版块

title: string,   // 标题

passProps: object,   // 传递的参数

backButtonIcon: Image.propTypes.source,  // 返回按钮

backButtonTitle: string,  // 返回按钮标题

leftButtonIcon:Image.propTypes.source,

leftButtonTitle: string,

onLeftButtonPress: function,

rightButtonIcon: Image.propTypes.source,

rightButtonTitle: string,

onRightButtonPress: function,

wrapperStyle: [object Object]

}

NavigatorIOS使用"路由"对象来包含要渲染的子视图、它们的属性、以及导航条配置。"push"和任何其它的导航函数的参数都是这样的路由对象。

itemWrapperStyle    View#style

导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色。

navigationBarHidden  bool

一个布尔值，决定导航栏是否隐藏。

shadowHidden bool

一个布尔值，决定是否要隐藏1像素的阴影。

tintColor string

导航栏上按钮的颜色。

titleTextColor string

导航器标题的文字颜色。

translucent bool

一个布尔值，决定是否导航条是半透明的。

注：本组件并非由Facebook官方开发组维护。

这一组件的开发完全由社区主导。如果纯js的方案能够满足你的需求的话，那么我们建议你选择Navigator组件。

原理图：

第一步。设置TabBar

NavigatorIOS在每个TabBarItem中设置

设置属性：

运行结果：

在此学习过程中遇到的问题：

在设置TabBarItem是，只设置属性，运行之后会报这个错误，是因为，TabBarItem中没有组件，确实组件。

今天的完整代码就不在上传，后期会做一个简单的小demo,将详细的把这段时候学习的运用一下，由于今天有bug还有调试出来，固今天就不在上传代码。

谢谢啦！！