天天瞎忙活,QQ:705719110,欢迎来撩!

React Native中Navigator和NavigatorIOS

JS学习 随风 257℃ 0评论

做iOS开发的都知道,iOS中除了tabbar这个基础容器外还有另一个常用的基础容器,就是Navigation,而React Native也将这个容器控件给封装了,Navigator和NavigatorIOS配合就能实现

一、Navigator

1.1 常用的属性

这个指定了默认的页面,也就是启动的组件页面

页面之间跳转时候的动画手势,可以看这个目录:

比如:PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump等等。

renderScene 具体是方法如下:

两个参数中的route包含的是initial的时候传递的name和component,而navigator是一个我们需要用的Navigator的对象;
所以当我们拿到route中的component的时候,我们就可以将navigator传递给它,正因为如此,我们的组件HomeScene才可以通过 this.props.navigator,拿到路由。

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

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

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

sceneStyle 样式风格
该继承了View视图的所有样式风格,用于设置每个页面容器的风格

1.2 常用的导航器方法

当获取了导航器对象的引用,我们可以进行调用以下一些方法来实现页面导航功能:

getCurrentRoutes() 该进行返回存在的路由列表信息

jumpBack() 该进行回退操作 但是该不会卸载(删除)当前的页面

jumpForward() 进行跳转到相当于当前页面的下一个页面

jumpTo(route) 根据传入的一个路由信息,跳转到一个指定的页面(该页面不会卸载删除)

push(route) 导航切换到一个新的页面中,新的页面进行压入栈。通过jumpForward()方法可以回退过去

pop() 当前页面弹出来,跳转到栈中下一个页面,并且卸载删除掉当前的页面

replace(route) 只用传入的路由的指定页面进行替换掉当前的页面

replaceAtIndex(route,index) 传入路由以及位置索引,使用该路由指定的页面跳转到指定位置的页面

replacePrevious(route) 传入路由,通过指定路由的页面替换掉前一个页面

resetTo(route) 进行导航到新的界面,并且重置整个路由栈

immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈

popToRoute(route) 进行弹出相关页面,跳转到指定路由的页面,弹出来的页面会被卸载删除

popToTop() 进行弹出页面,导航到栈中的第一个页面,弹出来的所有页面会被卸载删除

1.3 默认写法

二、Navigator.IOS

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
导航条的背景颜色。

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

比如:下面新闻列表跳转到新闻详情页详情页:

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

navigationBarHidden bool
一个布尔值,决定导航栏是否隐藏。

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

tintColor string
导航栏上按钮的颜色。

titleTextColor string
导航器标题的文字颜色。

translucent bool
一个布尔值,决定是否导航条是半透明的

三、示例

来看个小例子

来看看最后的效果

转载请注明:怼码人生 » React Native中Navigator和NavigatorIOS

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址