快捷搜索:
来自 新京葡娱乐场网址 2019-07-04 11:53 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

ReactNative学习实施,使用导航Navigator

ReactNative学习试行:Navigator实施

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

正文小编: 伯乐在线 - D.son 。未经作者许可,禁止转发!
应接插足伯乐在线 专辑小编。

离上次写奥德赛N笔记有一段时间了,时期参预了一个新类型,只在这两日的空闲时间继续深造施行,因此进度正如缓慢,可是这并不代表未有新进展,其实这几个小东西离上次发文时一度有了一对一大的浮动了,当中国电影响最大的变通正是引进了Redux,后边会系统介绍一下。
在始发核心从前,先添补有个别上回谈到的动画片初探(像自家如此可信严厉的工程师,必须更上一层楼,┗|`O′|┛ 嗷~~)。

上回文聊到,经过大家和好定义了余弦动画函数之后,动态设定state的4个参数,达成了相比流畅的加载动画,这里大概有朋友曾经注意到了,大家万分频仍的调用了setState方法,那在React和陆风X8N中都是一定大忌的,每叁遍setState都会触发render方法,也就意味着更频仍的杜撰DOM相比较,非常是在本田CR-VN中,那还表示更频仍的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));
  }

成效如下:
图片 1
此处有意在登记诉求实现之后并未有掩盖loading动画,由此同一时间施行了视图切换和loading七个卡通,效果勉强能够~

好了,该步向明日的宗旨了。先全部看一下这一品级落到实处的机能(哒哒哒~):
图片 2

珍视是模拟了三个新用户注册流程,实现起来也并不复杂,全部布局是用四个CRUISERN组件Navigator来做导航,即使有另二个NavigatorIOS组件在iOS系统上展现更加的杰出,不过思考到CRUISERN自个儿希望可以相同的时间在安卓和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,效果如下:
图片 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

打赏匡助自个儿写出更加的多好著作,谢谢!

任选一种支付方式

图片 4 图片 5

1 赞 3 收藏 评论

1、简要介绍:大好多时候大家都须求导航器来回答差别情形(页面)间的切换。它经过路由对象来鉴定识别区别的场景,我们那边运用的正是renderScene方法,依照钦命的路由来渲染。

关于笔者:D.son

图片 6

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

图片 7

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

(1initialRoute={{ name: 'home', component: HomeScene }} 这一个钦命了暗中同意的页面,也便是开行的机件页面

(2configureScene={() => {

return Navigator.SceneConfigs.HorizontalSwipeJump;

}}

本条是页面之间跳转时候的卡通片,能够看那个目录:

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(能够看别的跳转的时候的大方向)

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

(4 要是急需传参数,则在push的参数前边增添三个参数params,把JSON往死填就好了,这里的params,其实正是在renderScene中return的{...route.params},那样接收的页面只须求通过this.props.id,就足以获得大家传递的参数

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

全体代码:

/**

* Sample React Native App

*

*/'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);

增加补充部分或者会用到的Navigator方法:

getCurrentRoutes() - 获取当前栈里的路由,也便是push进来,没有pop掉的这一个。

jumpBack() - 跳回以前的路由,当然前提是保留今后的,仍是能够再跳回来,会给你保存原样。

jumpForward() - 上一个措施不是调到在此以前的路由了么,用那些跳回来就好了。

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

push(route) - 跳转到新的场景,并且将气象入栈,你能够稍后跳转过去

pop() - 跳转回来还要卸载掉当前景象

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

replaceAtIndex(route, index) - 替换掉钦命类别的路由场景

replacePrevious(route) - 替换掉在此以前的气象

immediatelyResetRouteStack(routeStack) - 用新的路由数组来复位路由栈

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

popToTop() - pop到栈中的第三个现象,卸载掉全部的别样场景。

二、NavigatorIOS

1、NavigatorIOS包装了UIKit的领航功用,可以应用左划功效来回到到上一分界面。

2、同上带有的办法有:

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:ReactNative学习实施,使用导航Navigator

关键词: