您的位置:新葡亰496net > 新葡亰官网 > ReactNative学习实践,使用导航Navigator

ReactNative学习实践,使用导航Navigator

发布时间:2019-07-28 19:27编辑:新葡亰官网浏览(98)

    ReactNative学习实行:Navigator执行

    2016/06/17 · JavaScript · HTML5, Javascript, React, ReactNative

    本文小编: 伯乐在线 - D.son 。未经小编许可,禁止转发!
    款待参与伯乐在线 专辑撰稿人。

    离上次写WranglerN笔记有一段时间了,时期插足了一个新类型,只在近年的空闲时间继续攻读实施,由此进程正如缓慢,不过那并不意味着未有新进展,其实那些小东西离上次发文时曾经有了一定大的更改了,当中国电影响最大的浮动就是引进了Redux,后边会系统介绍一下。
    在开班大旨之前,先补充某个上回聊起的动画片初探(像自家这么可信严刻的工程师,必须更进一步,┗|`O′|┛ 嗷~~)。

    上回文谈到,经过大家同心协力定义了余弦动画函数之后,动态设定state的4个参数,完成了比较流畅的加载动画,这里可能有意中人曾经注意到了,大家那多少个频繁的调用了setState方法,那在React和奥迪Q3N中都以一对一禁忌的,每二次setState都会触发render方法,也就表示更频仍的杜撰DOM比较,非常是在兰德ENCOREN中,那还表示更频仍的JSCore<==>iOS通讯,固然框架本身对一再setState做了优化,比方会计统计一起临时候调用的多少个setState,但那对品质和体会照旧会有相当大影响。

    上回大家只是独自完毕了贰个loading动画,所以还相比流利,当视图瓜时素非常多况且有各自的卡通片的时候,就拜见到相比严重的卡顿,那一个实际是足防止止的,因为在loading动画的落到实处部分,大家知道地领略只供给loading动画的一定组成都部队分更新而不是组件的具备片段以及承袭链上的持有组件都需求更新,而且确信那几个节点明确发生了变通,因而不供给经过虚拟DOM比较,那么一旦大家能绕开setState,动画就应该会更通畅,即便在错综相连的视图里边。那正是Animations文书档案最后提到的setNativeProps方法。

    As mentioned in the Direction Manipulation section, setNativeProps allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to setState and re-render the component hierarchy.

    setNativeProps允许大家直接决定原生组件的天性,而无需用到setState,也不会重绘承袭链上的别的零件。那多亏大家想要的机能,加上大家肯定知晓正在调节的机件以及它与视图别的零件的关系,因而,这里大家得以放心地使用它,何况一定轻松。
    更新前:

    loopAnimation(){ var t0=animationT,t1=t0 0.5,t2=t1 0.5,t3=t2 timeDelay,t4=t3 0.5;//这里分别是几个卡通的脚下岁月,依次增进了0.5的推迟 var v1=Number(Math.cos(t0).toFixed(2))*animationN animationM;//将cos函数的小数值只准确到小数点2位,进步运算效能var v2=Number(Math.cos(t1).toFixed(2))*animationN animationM; var v3=Number(Math.cos(t2).toFixed(2))*animationN animationM; var v4=Number(Math.cos(t3).toFixed(2))*animationN animationM; this.setState({ fV:v1, sV:v2, tV:v3, foV:v4 }); animationT =0.35;//扩大时间值,每趟增值越大动画越快 requestAnimationFrame(this.loopAnimation.bind(this)); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    loopAnimation(){
        var t0=animationT,t1=t0 0.5,t2=t1 0.5,t3=t2 timeDelay,t4=t3 0.5;//这里分别是四个动画的当前时间,依次加上了0.5的延迟
        var v1=Number(Math.cos(t0).toFixed(2))*animationN animationM;//将cos函数的小数值只精确到小数点2位,提高运算效率
        var v2=Number(Math.cos(t1).toFixed(2))*animationN animationM;
        var v3=Number(Math.cos(t2).toFixed(2))*animationN animationM;
        var v4=Number(Math.cos(t3).toFixed(2))*animationN animationM;
        this.setState({
          fV:v1,
          sV:v2,
          tV:v3,
          foV:v4
        });
        animationT =0.35;//增加时间值,每次增值越大动画越快
        requestAnimationFrame(this.loopAnimation.bind(this));
      }

    更新后:

    loopAnimation(){ var t0=··· var v1=··· var v2=··· var v3=··· var v4=··· this.refs.line1.setNativeProps({ style:{width:w1,height:v1} }); this.refs.line2.setNativeProps({ style:{width:w2,height:v2} }); this.refs.line3.setNativeProps({ style:{width:w3,height:v3} }); this.refs.line4.setNativeProps({ style:{width:w4,height:v4} }); animationT =0.35;//增加时间值,每一遍增值越大动画越快 requestAnimationFrame(this.loopAnimation.bind(this)); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    loopAnimation(){
        var t0=···
        var v1=···
        var v2=···
        var v3=···
        var v4=···
        this.refs.line1.setNativeProps({
          style:{width:w1,height:v1}
        });
        this.refs.line2.setNativeProps({
          style:{width:w2,height:v2}
        });
        this.refs.line3.setNativeProps({
          style:{width:w3,height:v3}
        });
        this.refs.line4.setNativeProps({
          style:{width:w4,height:v4}
        });
        animationT =0.35;//增加时间值,每次增值越大动画越快
        requestAnimationFrame(this.loopAnimation.bind(this));
      }

    成效如下:
    新葡亰496net 1
    此地有目的在于注册央求实现之后未有隐敝loading动画,因而同一时间实施了视图切换和loading四个卡通,效果还可以~

    好了,该步向明日的主题了。先全体看一下这一等级落到实处的功力(哒哒哒~):
    新葡亰496net 2

    驷不如舌是模仿了叁个新用户注册流程,落成起来也并不复杂,全部结构是用二个EvoqueN组件Navigator来做导航,就算有另三个NavigatorIOS组件在iOS系统上显示更是精良,可是考虑到宝马7系N本人希望能够同临时候在安卓和iOS上运营的初志,笔者采用了能够包容五个平台的Navigator来品尝,前段时间来看成效仍是基本上能用。
    在终极的详细消息视图里边,尝试了各样零部件,举例调用相机,Switch,Slider等,首借使尝鲜,哈哈~ 也本人实现了比较轻易的check按键。
    第一最外层的布局是一个Navigator,它决定总体用户注册的视图切换:

    <Navigator style={styles.navWrap} initialRoute={{name: 'login', component:LoginView}} configureScene={(route) => { return Navigator.SceneConfigs.FloatFromRight; }} renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }} />

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <Navigator style={styles.navWrap}
              initialRoute={{name: 'login', component:LoginView}}
              configureScene={(route) => {
                return Navigator.SceneConfigs.FloatFromRight;
              }}
              renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator={navigator} />
              }} />

    内部,initialRoute配置了Navigator的开首组件,这里就是LoginView组件,它自个儿不只能够一向登陆,也足以点击【笔者要注册】进入注册流程。configureScene属性则是用来布署Navigator中央电台图切换的卡通片类型,这里能够灵活布署切换形式:

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Navigator.SceneConfigs.PushFromRight (default)
    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

    renderScene属性则是必须配备的叁个特性,它担当渲染给定路由相应的零部件,约等于向Navigator全体路由对应的机件传递了”navigator”属性以及route本人指导的参数,假设不采用类似Flux可能Redux来全局存款和储蓄或调控state的话,那么Navigator里多少的传递就全靠”route.params”了,例如用户注册流程中,首先是选择剧中人物视图,然后步向注册视图填写账号密码短信码等,此时点击注册才会将有所数据发送给服务器,由此从剧中人物选拔视图到注册视图,须要将用户挑选的角色传递下去,在注册视图发送给服务器。因而,角色选取视图的跳转事件供给把参数传递下去:

    class CharacterView extends Component { constructor(props){ super(props); this.state={ character:"type_one" } } handleNavBack(){ this.props.navigator.pop(); } ··· handleConfirm(){ this.props.navigator.push({ name:"registerNav", component:RegisterNavView, params:{character:this.state.character} }); } render(){ return ( <View style={styles.container}> <TopBarView title="注册" hasBackArr={true} onBackPress={this.handleNavBack.bind(this)}/> ··· (this)}> 确认> </TouchableOpacity> > </View> ); } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    class CharacterView extends Component {
      constructor(props){
        super(props);
        this.state={
            character:"type_one"
        }
      }
     
      handleNavBack(){
        this.props.navigator.pop();
      }
      
      ···
      
      handleConfirm(){
        this.props.navigator.push({
          name:"registerNav",
          component:RegisterNavView,
          params:{character:this.state.character}
        });
      }
     
      render(){
        return (
          <View style={styles.container}>
            <TopBarView title="注册" hasBackArr={true} onBackPress={this.handleNavBack.bind(this)}/>
            
              
              ···
              
              (this)}>
                确认>
              </TouchableOpacity>
            >
          </View>
        );
      }
    }

    那是角色选拔视图CharacterView的有个别代码,由于Navigator并未像NavigatorIOS那样提供可安插的顶栏、重返开关,所以本人把顶栏做成了二个克配置的国有组件TopBarView,Navigator里边的兼具视图直接动用就能够了,点击TopBarView的回来开关时,TopBarView会调用给它配备的onBackPress回调函数,这里onBackPress回调函数是CharacterView的handleNavBack方法,即举办了:

    this.props.navigator.pop();

    1
    this.props.navigator.pop();

    至于this.props.navigator,这里我们并未在导航链上的各种组件显式地传递navigator属性,而是在Navigator初叶化的时候就在renderScene属性方法里联合配置了,导航链上全部组件的this.props.navigator其实都指向了一个合併的navigator对象,它有五个方式:push和pop,用来向导航链压入和生产组件,视觉上便是步向下一视图和再次回到上一视图,因而这里当点击顶栏重临开关时,直接调用pop方法就回去上一视图了。其实也能够把navigator对象传递到TopBarView里,在TopBarView内部调用navigator的pop方法,原理是同样的。而在CharacterView的承认开关事件里,必要保留用户挑选的角色然后跳转到下贰个视图,正是通过props传递的:

    this.props.navigator.push({ name:"registerNav", component:RegisterNavView, params:{character:this.state.character} });

    1
    2
    3
    4
    5
    this.props.navigator.push({
          name:"registerNav",
          component:RegisterNavView,
          params:{character:this.state.character}
        });

    这边正是调用的navigator属性的push方法向导航链压入新的零件,即步入下一视图。push方法接收的参数是一个满含多个性格的指标,name只是用来标记组件名称,而commponent和params则是标志组件以及传递给该零件的参数对象,这里的”commponent”和”params”多少个key名称是和前面renderScene是对应的,在renderScene回调里边,用到的route.commponent和route.params,正是此处push传递的参数对应的值。
    在用户注册视图中,有贰个用户协商必要用户确认,这里用户协商视图的切换格局与主流程不太一致,而三个Navigator只好在早期配置一种切换格局,因而,这里在Navigator里嵌套了Navigator,效果如下:
    新葡亰496net 3
    CharacterView的跳转事件中,向navigator的push传递的机件而不是RegisterView组件,而是传递的RegisterNavView组件,它是被嵌套的二个Navigator,那么些子导航链上含蓄了用户注册视图及用户协议视图。

    class RegisterNavView extends Component { constructor(props){ super(props); } handleConfirm(){ //send data to server ··· // this.props.navigator.push({ component:nextView, name:'userInfo' }); } render(){ return ( <View style={styles.container}> <Navigator style={styles.navWrap} initialRoute={{name: 'register', component:RegisterView,params:{navigator:this.props.navigator,onConfirm:this.handleConfirm.bind(this)}}} configureScene={(route) => { return Navigator.SceneConfigs.FloatFromBottom; }} renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} innerNavigator={navigator} /> }} /> </View> ); } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    class RegisterNavView extends Component {
      constructor(props){
        super(props);
      }
     
      handleConfirm(){
        //send data to server
        ···
        //
        this.props.navigator.push({
            component:nextView,
            name:'userInfo'
          });
      }
     
      render(){
        return (
          <View style={styles.container}>
            <Navigator style={styles.navWrap}
              initialRoute={{name: 'register', component:RegisterView,params:{navigator:this.props.navigator,onConfirm:this.handleConfirm.bind(this)}}}
              configureScene={(route) => {
                return Navigator.SceneConfigs.FloatFromBottom;
              }}
              renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} innerNavigator={navigator} />
              }} />
          </View>
        );
      }
    }

    本条被嵌套的领航大家姑且称为InnerNav,它的初步路由组件就是RegisterView,体现了输入账号密码等消息的视图,它的configureScene设置为“FloatFromBottom”,即从底层浮上来,renderScene也可以有一些差别,在InnerNav导航链组件上传递的navigator对象名称改成了innerNavigator,以界别主流程Navigator,在RegisterView中有叁个【用户协议】的文字按键,在那一个按键上大家调用了向InnerNav压入协议视图的方法:

    handleShowUserdoc(){ this.props.innerNavigator.push({ name:"usrdoc", component:RegisterUsrDocView }); }

    1
    2
    3
    4
    5
    6
    handleShowUserdoc(){
        this.props.innerNavigator.push({
          name:"usrdoc",
          component:RegisterUsrDocView
        });
      }

    而在RegisterUsrDocView即用户协商视图组件中,点击分明按钮时我们调用了从InnerNav推出视图的方法:

    handleHideUserdoc(){ this.props.innerNavigator.pop(); }

    1
    2
    3
    handleHideUserdoc(){
        this.props.innerNavigator.pop();
    }

    如此那般内嵌的导航链上的视图就马到成功了压入和生产的欧洲经济共同体意义,若是有须要,还是可以够加上更加多组件。
    在RegisterNavView组件的handleConfirm方法中,也正是点击注册之后调用的格局,此时向服务器发送数据同偶然候必要步向注册的下一环节了,因而必要主流程的Navigator压入新的视图,所以调用的是this.props.navigator.push,并非innderNavigator的措施。

    好了,大约结构和流程就介绍到此处了,绝比较较轻便,实际付出中依旧会遇见好多细节难点,比方整个注册流程中,数据都急需仓库储存在该地,最终统一交由到服务器,如果导航链上有相当多组件,那么数量就要顶级超级以props的方法传送,特别蛋疼,因而才引进了Redux来归并存款和储蓄和管制,下一篇作品会系统介绍Redux以及在那么些小项目里引进Redux的进度。

    打赏帮助小编写出愈来愈多好文章,多谢!

    打赏小编

    一、Navigator

    Navigator 导航器

    接触了奥德赛N之后,必不可免得要接触分界面之间跳转之类的要求,而这一类须求的完毕要求求运用到Navigator那个导航器,此次记录一下应用进程中对于Navigator导航器的体会。

    前言

    打赏支持本身写出越多好文章,多谢!

    任选一种支付形式

    新葡亰496net 4 新葡亰496net 5

    1 赞 3 收藏 评论

    1、简介:大许多时候大家都亟需导航器来应对各异境况(页面)间的切换。它通过路由对象来识别不相同的光景,大家这里运用的就是renderScene方法,依照钦定的路由来渲染。

    从脚下场景跳转到下顶级场景,带转场动画

    率先要精晓这几个导航器,能够初叶的驾驭和Android中activity的货仓管理均等,导航器除了分界面导航功用之外,还提供分界面栈的保管,分界面包车型客车跳入和跳出。(翼虎N中每三个component都也就是一个零部件,多个或四个component共同构成场景(Scene),场景通俗的掌握正是贰个据有整个显示屏的分界面)

    在后面一个的开垦中,大家须求实现三个页面包车型地铁切换跳转,iOS中选用Navigation完结页面包车型地铁跳转,react Native中选拔Navigator和NavigatorIOS来贯彻分歧页面间的切换。

    关于小编:D.son

    新葡亰496net 6

    80后码农兼伪文青一枚,闷骚而不木讷,猥琐不流浪荡 个人主页 · 作者的篇章 · 1

    新葡亰496net 7

    2、利用Navigator弹出用到的法子:

    import React, { Component } from 'react';

    EscortN中的入口是index.android.js(以Android为例),那些index.js能够当作整个福特ExplorerN建构的框架,一些基础的事物都在这里实例化、定义。大家的导航器也亟需在那一个文件中被创建。(后文中涉及的BackAndroid也在这里面定义)

    一。达成原理及质量

    (1initialRoute={{ name: 'home', component: HomeScene }} 这么些钦点了默许的页面,也正是运营的零件页面

    import {

    Navigator属性介绍

    Navigator中带有如下属性:

    导航器通过路由对象来甄别差别的情况,利用renderScene方法,导航栏能够依赖钦赐的路由来渲染场景。

    (2configureScene={() => {

    AppRegistry,

    initialRoute

    起头化路由,开首化须求出示的Component,个中的component参数须要求有,定义如下:

    initialRoute={{title:'main',id:'main',component:defaultComponent}}

    1.1导航跳转方法

    return Navigator.SceneConfigs.HorizontalSwipeJump;

    StyleSheet,

    configureScene

    配备场景动画,系统提供了广大动画,如从底部弹出,从左弹出等,参数如下:

    零件中定义:

    configureScene={this._configureScence.bind(this)}

    _configureScence(route) {

    console.log("AndroidTestComponent=====configureScenceAndroid" route.type)

    if(route.type =='Bottom') {

    returnNavigator.SceneConfigs.FloatFromBottom;// 底部弹出

    }else if(route.type =='Left') {

    returnNavigator.SceneConfigs.FloatFromLeft// 左侧弹出

    }else if(route.type =='Right') {

    returnNavigator.SceneConfigs.FloatFromRight//右侧弹出

    }

    returnNavigator.SceneConfigs.PushFromRight;// 暗中认可侧边弹出

    }

    react中的路由的囤积格局经过栈来囤积的,有先进后出的风味。

    }}

    Text,

    renderScene

    此情此景渲染,依照路由来分明要挂载渲染的光景,设置如下:

    组件中定义

    renderScene={this._scene.bind(this)}

    //场景渲染方法,传入路由器和导航器八个办法

    _scene(route, navigator) {

    console.log(route)

    //这几个里面假如不做拍卖,默许再次回到的是initialRoute早先化的component

    letComponent= route.component;

    //路由器的params能够指引参数

    //将改导航器传递给下三个Component

    return

    //大概直接引进三个现存的Component

    //return

    }

    getCurrentRoutes()

    其一是页面之间跳转时候的动画,能够看那一个目录:

    View,

    ref

    其一性子有一点很神奇,互连网海人民广播电视台湾大学介绍Navigator的博客代码中从不写这么些脾气,那个天性相当于给二个零件加多三个label标签,然后经过该标签能够找到对应的零件,发掘这几个天性的案由是自己在写BackAndroid的时候,要求运用到navigator这些指标,在监听物理再次来到键的时候推断是不是还大概有路由存在,日常在艺术中获得navigator的点子如下:

    _pressButton(){

    const {navigator} = this.props;

    }

    像这种类型写的前提是_pressButton该格局一般都会被bind,况兼该Component在挂载前已经把navigator传递过来了,所以可以获得到,可是大家在index.js中利用BackAndroid,定义方法不管是应用箭头函数也许在构造方法中bind对应的章程,那年this.props都尚未navigator那么些天性,所以那个时候是找不到的,也就不能落实导航回降的功力,而采用ref就很好的减轻那个主题材料了,即子组件获取父组件通过props、父组件获取子组件通过refs。如下设置:

    在创建中增加:

    ref="navigator"

    艺术中调用:

    onBackAndroid=()=>{

    constnavigator=this.refs.navigator;

    ...

    }

    取稳当前栈里的路由,也正是push进来,没有pop掉的那几个

    node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(能够看别的跳转的时候的自由化)

    Navigator,

    Navigator方法

    getCurrentRoutes() - 获取当前栈里的路由列表,也便是push进来,未有pop掉的那八个

    jumpBack() - 跳回从前的路由,保留今后的,还足以再跳回来。也等于浏览器的回落

    jumpForward() - 结合jumpBack,此办法再另行张开回落前的,也正是浏览器的上进

    jumpTo(route) - 跳转到八个从未被撤除挂载的已存在境况

    push(route) - push三个新的路由场景

    pop() - 移除并吊销挂载当前的景色,回到上贰个现象

    replace(route) -用一个新的路由场景取代当前的情景,该方法之后当前的光景就被撤回挂载了

    replaceAtIndex(route,index) -通过制订index下标replace

    replacePrevious(route) -replace前一个气象

    immediatelyResetRouteStack(routeStack) -用新的路由场景Stack重新设置货仓中的每贰个光景

    popToRoute(route) - 移除并注销挂载当前场景到制订场景之间的对

    popToTop() - 移除并撤消挂载出仓库中首先个场景外的另外场景

    在那之中route路由最焦点的就是

    var route = {component: LoginComponent}

    jumpBack() 

    (3renderScene:多少个参数中的route满含的事initial的时候传递的name和component,而navigator是二个大家供给用的Navigator的目的,所以当大家获得route中的component的时候,大家就能够将navigator传递给它,正因为那样,大家的零件HomeScene技艺够经过this.props.navigator,获得路由。

    TouchableOpacity

    总体代码如下

    //component是从react中来的

    importReact, {Component}from'react';

    //Text以及View等都以从react-native中来的

    import{

    AppRegistry,

    StyleSheet,

    Navigator,

    BackAndroid,

    Dimensions

    }from'react-native';

    importsplashfrom'./app/mainview/splash'

    importguidefrom'./app/mainview/guide'

    //定义二个Component,遵照ES6的语法来,就和java语法中定义class同样,承接component

    export  default  classAndroidTestComponentextendsComponent{

    //构造函数

    constructor(props) {

    super(props)

    //如果_onBackAndroid不是贰个箭头函数,供给在构造函数中bind this,要不然在加多监听和移除监听时操作的对象是见仁见智的

    // this._onBackAndroid = this.onBackAndroid.bind(this)

    }

    //场景动画

    _configureScence(route) {

    console.log("AndroidTestComponent=====configureScenceAndroid" route.type)

    if(route.type =='Bottom') {

    returnNavigator.SceneConfigs.FloatFromBottom;// 尾巴部分弹出

    }else if(route.type =='Left') {

    returnNavigator.SceneConfigs.FloatFromLeft// 侧面弹出

    }else if(route.type =='Right') {

    returnNavigator.SceneConfigs.FloatFromRight//侧边弹出

    }

    returnNavigator.SceneConfigs.PushFromRight;// 默许侧边弹出

    }

    //场景渲染

    _scene(route, navigator) {

    letComponent= route.component;

    //传递参数以及导航器

    return

    }

    //使用箭头函数,直接绑定this,无需再构造函数中再去bind

    onBackAndroid=()=>{

    //使用refs来获取导航器

    constnavigator=this.refs.navigator;

    if(!navigator){

    return false;

    }

    constrouters=navigator.getCurrentRoutes();

    if(routers.length>1){

    navigator.pop();

    return true;

    }else{

    return false;

    }

    }

    //compoment将在挂载的函数,那一年能够在继续创新state 增多监听

    componentWillMount() {

    console.log("AndroidTestComponent=====componentWillMount")

    BackAndroid.addEventListener('hardwareBackPress',this.onBackAndroid)

    }

    //render属性对应的函数会回来一段JSX来表示该器件的协会和布局。该片段是一个零部件至关重要的地点,未有那个内容,就不能构成贰个组件。

    //render方法必须回到单个根成分

    //compoment挂载渲染的函数

    render() {

    //定义暗许闪屏分界面

    letdefaultComponent= splash;

    return(

    configureScene={this._configureScence.bind(this)}

    renderScene={this._scene.bind(this)}

    ref="navigator"

    />

    );

    }

    //compoment已经挂载的函数

    //分界面渲染完之后,在进行一些数码管理,譬喻互连网数据加载,譬喻本地数据加载

    componentDidMount() {

    console.log("AndroidTestComponent=====componentDidMount")

    }

    //作为子控件时,当期质量被改动时调用

    componentWillReceiveProps(nextProps) {

    console.log("AndroidTestComponent=====componentWillReceiveProps")

    }

    //component就要更新时调用

    componentWillUpdate(nextProps, nextState) {

    console.log("AndroidTestComponent=====componentWillUpdate")

    }

    //component更新后调用

    componentDidUpdate(prevProps, prevState) {

    console.log("AndroidTestComponent=====componentDidUpdate")

    }

    //component销毁时调用

    componentWillUnmount() {

    console.log("AndroidTestComponent=====componentWillUnmount")

    BackAndroid.removeEventListener('hardwareBackPress',this.onBackAndroid)

    }

    }

    conststyles=StyleSheet.create({

    container: {

    flex:1,

    justifyContent:'flex-start',

    alignItems:'stretch',

    backgroundColor:'white'

    },

    lineStyle: {

    backgroundColor:'grey',

    height:0.3,

    },

    loadText: {

    fontSize:20,

    textAlign:'center',

    margin:10

    },

    loadView: {

    flex:1,

    alignItems:'center',

    justifyContent:'center'

    },

    });

    //另一种概念props的点子,借使static defaultProps也定义了,那几个会覆盖下面的

    // AndroidTestComponent.defaultProps = {

    //    name:'xiaoerlang'

    // }

    //进行注册 '汉兰达NProject'为项目名称 AndroidTestComponent 为运转的component

    AppRegistry.registerComponent('RNProject', () => AndroidTestComponent);

    进度中蒙受的题目及消除方案:

    react native - expected acomponent class, got [object Object]

    该错误是引用了小写的组件,组件首字母一定要大写,比如<splash/>应该写成<Splash>

     跳回以前的路由,当然前提是保留以后的,还是能再跳回来,会给您保存原样。

    (4 借使急需传参数,则在push的参数后边扩大三个参数params,把JSON往死填就好了,这里的params,其实就是在renderScene中return的{...route.params},那样接收的页面只要求经过this.props.id,就足以获得我们传递的参数

    } from 'react-native';

    jumpForward()

    (5 OK,那参数怎么回传呢?回调!通过定义贰个回调函数,利用this.props 去调用,把参数回传回来

    //第1个场景

    上三个艺术不是调到在此之前的路由了么,用那一个跳回来就好了。

    一体化代码:

    var FirstScene=React.createClass({

    jumpTo(route) 

    /**

    pressPush:function()

    跳转到已部分场景何况不卸载。

    * Sample React Native App

    { //推出下超等第页面

    push(route)

    *

    var nextScene={component:SecondScene};

    跳转到新的气象,并且将气象入栈,你能够稍后跳转过去

    */'use strict';varReact = require('react-native');//增加NavigatorIOSvar{  AppRegistry,  StyleSheet,  Text,  View,  Navigator,  TouchableHighlight,} = React;/*--  运维组件 --*/varMainClass = React.createClass({  render:function() {//component这里设置的是以此组件运转的时候显得的首先个头组件return({              return Navigator.SceneConfigs.HorizontalSwipeJump;          }}          renderScene={(route, navigator) => {            let Component = route.component;            if(route.component) {              return}          }} >);  },});/*--  首页页面组件 --*/var HomeScene = React.createClass({  getInitialState:function () {    return {      id: 'AXIBA001',      flag: null    };  },  render: function() {    return (push me!{this.state.flag && ' I 'm ' this.state.flag ', i come from second page'});  },  onPress: function() {    var _me = this;    //或许写成 const navigator = this.props.navigator;    const { navigator } = this.props;    if(navigator)    {        navigator.push({            name: 'touch View',            component: SecondScene,            params: {                id: this.state.id,                getSomething:function(flag) {                  _me.setState({                    flag: flag                  });                }            }        })    }  }});/*--  push后的页面组件 --*/var SecondScene = React.createClass({  render: function() {    return (push sucess!I get {this.props.id},i want back!);  },  onPress: function() {    //大概写成 const navigator = this.props.navigator;    const { navigator } = this.props;    if(this.props.getSomething) {      var flag = 'Axiba002'      this.props.getSomething(flag);    }    if(navigator) {      navigator.pop();    }  }});/*布局样式*/var styles = StyleSheet.create({  container: {    flex: 1,    // justifyContent: 'center',    // alignItems: 'center',    backgroundColor: '#F5FCFF',  },  home: {    paddingTop:74,  },});AppRegistry.registerComponent('AwesonProject', () => MainClass);

    this.props.navigator.push(nextScene);

    pop() 

    补给部分或许会用到的Navigator方法:

    },

    跳转回去还要卸载掉当前场合

    getCurrentRoutes() - 获取当前栈里的路由,也正是push进来,未有pop掉的那多少个。

    render(){

    replace(route)

    jumpBack() - 跳回在此之前的路由,当然前提是保存现在的,还是可以再跳回来,会给您保存原样。

    return(

    用多个新的路由替换掉当前情景

    jumpForward() - 上一个方法不是调到以前的路由了么,用这些跳回来就好了。

    Go NextPage

    replaceAtIndex(route, index) 

    jumpTo(route) - 跳转到已有些场景何况不卸载。

    );

     替换掉钦点连串的路由场景

    push(route) - 跳转到新的面貌,而且将气象入栈,你可以稍后跳转过去

    }

    replacePrevious(route) 

    pop() - 跳转回来还要卸载掉当前情状

    });

     替换掉此前的光景

    replace(route) - 用贰个新的路由替换掉当前场景

    //第二景观

    resetTo(route)  

    replaceAtIndex(route, index) - 替换掉内定体系的路由场景

    var SecondScene=React.createClass({

    跳转到新的光景,何况重新恢复设置整个路由栈

    replacePrevious(route) - 替换掉此前的场景

    pressPop:function()

    immediatelyResetRouteStack(routeStack)

    immediatelyResetRouteStack(routeStack) - 用新的路由数组来重新设置路由栈

    { //重回上一流页面

     用新的路由数组来重新恢复设置路由栈

    popToRoute(route) - pop到路由内定的景色,其余的景观将会卸载。

    //var prevScene={componment:FirstScene};

    popToRoute(route) 

    popToTop() - pop到栈中的率先个情景,卸载掉全体的其他场景。

    this.props.navigator.pop();       //直接回到上超级页面不供给pop参数

     pop到路由钦命的气象,在全体路由栈中,处于钦定场景过后的情景将会被卸载。

    二、NavigatorIOS

    },

    popToTop()

    1、NavigatorIOS包装了UIKit的领航成效,能够行使左划功能来回到到上一分界面。

    render(){

    pop到栈中的第二个场景,卸载掉全数的别样场景。

    2、同上含蓄的点子有:

    return(

    1.2导航属性

    push(route)- 导航器跳转到贰个新的路由。

    Go prevPage

    configureScene  = {() =>{

    return Navigator. SceneConfigs .HorizontalSwipeJump;

    }}

    pop()- 回到上一页。

    );

    可选的函数,用来布局场景动画和手势。会含有多少个参数调用,四个是时下的路由,二个是现阶段的路由栈。然后它应该重回四个景色布局对象.

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

    }

    处境布局对象:

    replace(route)- 替换当前页的路由,并当即加载新路由的视图。

    });

    Navigator.SceneConfigs.PushFromRight (默认)

    replacePrevious(route)- 替换上一页的路由/视图。

    var NavigatorDemo=React.createClass({

    Navigator.SceneConfigs.FloatFromRight

    replacePreviousAndPop(route)- 替换上一页的路由/视图並且立即切换回上一页。

    render(){

    Navigator.SceneConfigs.FloatFromLeft

    resetTo(route)- 替换最一级的路由并且回到它。

    var rootRoute={

    Navigator.SceneConfigs.FloatFromBottom

    popToRoute(route)- 平素回到有些钦赐的路由。

    component:FirstScene

    ReactNative学习实践,使用导航Navigator。Navigator.SceneConfigs.FloatFromBottomAndroid

    popToTop()- 回到最顶层的路由。

    };

    Navigator.SceneConfigs.FadeAndroid

    代码:

    return(

    Navigator.SceneConfigs.HorizontalSwipeJump

    /**

    initialRoute={rootRoute}                       /*  制订早先暗中同意页面*/

    Navigator.SceneConfigs.HorizontalSwipeJumpFromRight

    * Sample React Native App

    configureScene={(route)=>{

    Navigator.SceneConfigs.VerticalUpSwipeJump

    *

    return Navigator.SceneConfigs.PushFromRight; /* 配置场景转场动画从右到左*/

    Navigator.SceneConfigs.VerticalDownSwipeJump

    */'use strict';varReact = require('react-native');//增加NavigatorIOSvar{  AppRegistry,  StyleSheet,  Text,  View,  NavigatorIOS,  TouchableHighlight,} = React;/*有那样局地需求?:自定义barBarItem,举例自定义名字、图片?*//*--  运转组件 --*/varMainClass = React.createClass({  onRightButtonPress:function(){this.refs.nav.push({      title:'push view',      component: SecondScene,    });  },  render:function() {//component这里安装的是以此组件运行的时候显得的首先个子组件return();  },});/*--  首页页面组件 --*/var HomeScene = React.createClass({  render: function() {    return (push me!);  },  onPress: function() {    this.props.navigator.push({      title: 'touch View',      component: SecondScene,      passProps: { myProp: 'Axiba001' },    });  }});/*--  push后的页面组件 --*/var SecondScene = React.createClass({  render: function() {    return (push sucess!{'hi,this is prams:' this.props.myProp});  },});/*布局样式*/var styles = StyleSheet.create({  container: {    flex: 1,    // justifyContent: 'center',    // alignItems: 'center',    backgroundColor: '#F5FCFF',  },  home: {    paddingTop:74,  },});AppRegistry.registerComponent('AwesonProject', () => MainClass);

    }}

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

    回调函数基本一样,可是注意还应该有一部分对导航栏的主宰,例如:

    renderScene={(route,navigator)=>{              /*渲染场景*/

    概念运维时加载的路由。路由是导航栏用来甄别渲染场景的四个指标。initialRoute必须是initialRouteStack中的三个路由。initialRoute默以为initialRouteStack中最后一项。

    (1 barTintColorstring

    var Component=route.component;

    initialRouteStack      [object]

    导航条的背景颜色。

    return(

    提供三个路由集结用来先河化。若无安装伊始路由的话则必须安装该属性。若无提供该属性,它将被暗许设置成两个只包括initialRoute的数组。

    (2 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]}

    navigator={navigator}                               /*将navigator传递到下三个风貌*/

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

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

    route={route}/>                                        /*将route传递到下三个地方*/

    七个参数中的route包涵的是initial的时候传递的name和component,而navigator是多个大家须求用的Navigator的靶子;

    (3 itemWrapperStyleView#style

    );

    故而当大家得到route中的component的时候,我们就可以将navigator传递给它,正因为如此,大家的零件HomeScene才干够透过  this.props.navigator,得到路由。

    导航器中的组件的私下认可属性。一个广阔的用处是安装富有页面包车型大巴背景颜色。

    }}

    navigationBar    node

    (4 navigationBarHiddenbool

    />

    可选参数,提供贰个在气象切换的时候保持的导航栏。

    叁个布尔值,决定导航栏是不是隐伏。

    );

    navigator    object

    ( 5 shadowHiddenbool

    }

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

    多个布尔值,决定是或不是要遮盖1像素的黑影

    });

    新葡亰496net,onDidFocus    function

    ( 6 tintColorstring

    const styles = StyleSheet.create({

    导航栏上按键的颜色。

    container: {

    每当导航切换实现或早先化之后,调用此回调,参数为新景色的路由。

    ( 7 titleTextColorstring

    flex: 1,

    onWillFocus   function

    导航器标题标文字颜色。

    justifyContent: 'center',

    会在导航切换此前调用,参数为对象路由。

    (8 translucentbool

    alignItems: 'center',

    sceneStyle  和View的属性样式同样

    将会使用在每种场景的容器上的体裁。

    三个布尔值,决定是还是不是导航条是半透明的。

    backgroundColor: '#F5FCFF',

    1.3暗中同意写法

    连带的链接地址在此间:http://www.tuicool.com/articles/z226zin

    },

    <Navigator

    btn:{

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

    padding:5,

    configureScene={(route) => {

    backgroundColor:'#06f',

    returnNavigator.SceneConfigs.HorizontalSwipeJumpFromRight;

    borderRadius:5,

    }}

    }

    renderScene={(route,navigator) => {

    });

    letComponent=route.component;

    module.exports=NavigatorDemo;

    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

    一个布尔值,决定是不是导航条是半晶莹剔透的。

    注:本组件并非由推特(TWTR.US)(推特(Twitter))官方开垦组维护。

    这一组件的付出完全由社区中央。假若纯js的方案能够满意你的须要的话,那么大家提出你挑选Navigator组件。

    原理图:

    新葡亰496net 8

    第一步。设置TabBar

    新葡亰496net 9

    NavigatorIOS在每个TabBarItem中设置

    设置属性:

    新葡亰496net 10

    运作结果:

    新葡亰496net 11

    在此读书进程中蒙受的主题材料:

    新葡亰496net 12

    在安装TabBarItem是,只设置属性,运维之后会报那几个荒唐,是因为,TabBarItem中尚无组件,确实组件。

    明天的完全代码就不在上传,前期会做二个简练的小demo,将详细的把这段时候学习的运用一下,由于前几日有bug还会有调节和测验出来,固后天就不在上传代码。

    谢谢啦!!

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:ReactNative学习实践,使用导航Navigator

    关键词:

上一篇:H5游戏开发

下一篇:没有了