14 React Native常用组件之Navigator和Na

(申明: 此系列教程,转载旋之华微信公众号,如有侵权 . 通知删除~)

(大家可以添加他的微信公众号了解更多内容.)

image.png

在开发中，我们需要实现多个界面的切换，这时候就需要一个导航控制器来进行各种效果的切换。那么，在React Native中有两个组件能够实现这样的效果：Navigator和NavigatorIOS。

   其中Navigator是适配Android和iOS，而NavigatorIOS则是

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

image

一、Navigator

   很多时候，我们需要导航器来应对不同场景（页面）间的切换。它通过路由对象来分辨不同的场景，我们这里采用的就是 `renderScene` 方法，根据指定的路由来渲染。

1.1 常用的属性

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

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

** configureScene ={() => {**

return Navigator. SceneConfigs .HorizontalSwipeJump;

}}

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

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)，比如：

PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump

等等。

** renderScene **

具体是方法如下:

(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />

   两个参数中的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 默认写法

<pre style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; color: rgb(62, 62, 62); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><

Navigator

initialRoute

=

{{

name

:

defaultName

,

component

:

defaultComponent

}}

configureScene

=

{(

route

) => {

return

Navigator.

SceneConfigs

.

HorizontalSwipeJumpFromRight

;
}}

renderScene

=

{(

route

,

navigator

) => {

let

Component

=

route

.

component

;

return

<

Component

{...

route

.

props

}

navigator

=

{

navigator

} />
}}
/></pre>

二、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"和任何其它的导航函数的参数都是这样的路由对象。

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

  ![image](http:https://img.haomeiwen.com/i7403773/0f51eeb296a6c4a5?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

itemWrapperStyle View#style

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

navigationBarHidden bool

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

**shadowHidden bool **

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

**tintColor string **

导航栏上按钮的颜色。

** titleTextColor string **

导航器标题的文字颜色。

**translucent bool **

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

三、综合小案例

****3.1 部分核心代码****

image image

****3.2 运行效果图****

image

图1-1 新闻列表页

image

图1-2 新闻详情页

image

图1-3 个人中心页面