美文网首页RN
14 React Native常用组件之Navigator和Na

14 React Native常用组件之Navigator和Na

作者: 小刘_假装是个程序员 | 来源:发表于2017-12-01 11:04 被阅读6次

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

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

    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 个人中心页面

    相关文章

      网友评论

        本文标题:14 React Native常用组件之Navigator和Na

        本文链接:https://www.haomeiwen.com/subject/pkbibxtx.html