澳门在线威尼斯官方 > 威尼斯澳门在线 > 使用导航Navigator,ReactNative学习实践

原标题:使用导航Navigator,ReactNative学习实践

浏览次数:114 时间:2019-11-16

ReactNative学习试行:Navigator执行

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

正文作者: 伯乐在线 - D.son 。未经小编许可,禁止转发!
招待参与伯乐在线 专栏审核人。

离上次写ENVISIONN笔记有豆蔻梢头段时间了,时期参预了三个新类型,只在近年来的空闲时间继续学习实行,因而进度正如缓慢,可是那并不代表未有新進展,其实那么些小东西离上次发布文书时大器晚成度有了一定大的变迁了,当中国电影响最大的扭转就是引进了Redux,前边会系统介绍一下。
在始发大目的在于此以前,先补充有个别上回说起的动漫片初探(像自个儿这么可信赖严峻的程序员,必得更上大器晚成层楼,┗|`O′|┛ 嗷~~)。

上回文说起,经过大家相依为命定义了余弦动画函数之后,动态设定state的4个参数,完结了相比通畅的加载动漫,这里大概有朋友曾经注意到了,大家优越频繁的调用了setState方法,那在React和LX570N中都以致极大忌的,每一次setState都会触发render方法,也就象征更频仍的假造DOM相比,特别是在OdysseyN中,那还代表更频仍的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

重借使模拟了多少个新客商注册流程,落成起来也并不复杂,全部结构是用七个奥迪Q7N组件Navigator来做导航,纵然有另贰个NavigatorIOS组件在iOS系统上表现越来越优良,不过思忖到汉兰达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,效果如下:
图片 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的经过。

打赏扶助小编写出越来越多好小说,多谢!

打赏小编

* Sample React Native App

关于小编:D.son

图片 4

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

图片 5

2、利用Navigator弹出用到的议程:

打赏支持笔者写出越多好小说,感激!

任选意气风发种支付格局

图片 6 图片 7

1 赞 3 收藏 评论

jumpBack() - 跳回早前的路由,当然前提是保存今后的,还能再跳回来,会给您保存原样。

return Navigator.SceneConfigs.HorizontalSwipeJump;

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

(3 itemWrapperStyleView#style

导航器题指标文字颜色。

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

导航器中的组件的默许属性。八个遍布的用场是安装有着页面包车型客车背景颜色。

一、Navigator

(1 barTintColorstring

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

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

pop()- 回到上意气风发页。

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

(2configureScene={() => {

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

replacePreviousAndPop(route)- 替换上黄金年代页的路由/视图并且及时切换回上生龙活虎页。

replacePrevious(route)- 替换上大器晚成页的路由/视图。

( 7 titleTextColorstring

(8 translucentbool

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

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

*

1、简介:大好些个时候大家都亟需导航器来回答不相同景色(页面卡塔 尔(英语:State of Qatar)间的切换。它经过路由对象来分辨差异的光景,大家这里运用的便是renderScene方法,依据钦赐的路由来渲染。

popToRoute(route) - pop到路由钦命的现象,其余的气象将会卸载。

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

三个布尔值,决定是不是要隐敝1像素的影子

(4 navigationBarHiddenbool

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

( 5 shadowHiddenbool

回调函数基本相近,但是注意还大概有局地对导航栏的决定,比如:

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

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:使用导航Navigator,ReactNative学习实践

关键词:

上一篇:没有了

下一篇:没有了