>

//第二场景澳门博发娱乐官网,iOS中使用Navigati

- 编辑:澳门博发娱乐官网 -

//第二场景澳门博发娱乐官网,iOS中使用Navigati

关于我:D.son

澳门博发娱乐官网 1

80后码农兼伪文青生机勃勃枚,闷骚而不木讷,猥琐不流浪荡 个人主页 · 作者的小说 · 1

澳门博发娱乐官网 2

一个布尔值,决定导航栏是或不是隐身。

//第二个情景

接触了TucsonN之后,必不可免得要接触分界面之间跳转之类的供给,而那意气风发类供给的落到实处一定要利用到Navigator这些导航器,此番记录一下用到进程中对于Navigator导航器的回味。

pop到栈中的首先个现象,卸载掉全体的此外场景。

ReactNative学习施行:Navigator实践

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

正文作者: 伯乐在线 - D.son 。未经小编许可,幸免转发!
款待参加伯乐在线 专栏编辑者。

离上次写HighlanderN笔记有豆蔻年华段时间了,时期参与了一个新品类,只在前段时间的悠闲时间继续攻读施行,因而进程正如缓慢,然则那并不意味着未有新进展,其实这几个小东西离上次发布文书时已经有了一定大的成形了,在那之中国电影响最大的变化正是引入了Redux,前边会系统介绍一下。
在上马核心在此以前,先增补有些上回提及的卡通初探(像自家那样可靠严酷的工程师,必须改革,┗|`O′|┛ 嗷~~)。

上回文提及,经过我们团结定义了余弦动漫函数之后,动态设定state的4个参数,完毕了相比较流利的加载动漫,这里或然有对象曾经注意到了,我们充裕频仍的调用了setState方法,那在React和汉兰达N中都以十三分禁忌的,每三遍setState都会触发render方法,也就象征更频繁的设想DOM相比较,极其是在奥迪Q5N中,那还意味着更频仍的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));
  }

职能如下:
澳门博发娱乐官网 3
那边有意在注册哀告实现之后并未有掩盖loading动漫,由此同时进行了视图切换和loading七个卡通,效果尚可~

好了,该步入前不久的主旨了。先全体看一下这一等第落到实处的意义(哒哒哒~):
澳门博发娱乐官网 4

至关重要是效仿了三个新顾客注册流程,完成起来也并不复杂,全部结构是用三个奥迪Q5N组件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,效果如下:
澳门博发娱乐官网 5
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}                               /*将navigator传递到下八个场景*/

renderScene

气象渲染,依据路由来规定要挂载渲染的气象,设置如下:

构件中定义

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

//场景渲染方法,传入路由器和导航器七个情势

_scene(route, navigator) {

console.log(route)

//那几个里面假如不做处理,默许重临的是initialRoute初阶化的component

letComponent= route.component;

//路由器的params能够带领参数

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

return

//大概直接引进一个现有的Component

//return

}

initialRouteStack      [object]

打赏扶植自身写出越多好作品,多谢!

任选大器晚成种支付格局

澳门博发娱乐官网 6 澳门博发娱乐官网 7

1 赞 3 收藏 评论

NavigatorIOS使用"路由"对象来含有要渲染的子视图、它们的属性、以至导航条配置。"push"和其余别的的导航函数的参数都以那般的路由对象。

initialRoute={rootRoute}                       /*  制订初步暗中认可页面*/

哈弗N中的入口是index.android.js(以Android为例),这一个index.js能够视作整个瑞虎N建构的框架,一些底子的事物都在那间实例化、定义。大家的导航器也急需在此个文件中被创设。(后文中涉及的BackAndroid也在在那之中间定义)

Navigator.SceneConfigs.FloatFromBottom

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

configureScene={(route)=>{

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;// 暗许右边弹出

}

popToTop()

jumpForward() - 上三个主意不是调到在此以前的路由了么,用这一个跳回来就好了。

flex: 1,

initialRoute

带头化路由,初步化需求展现的Component,在那之中的component参数必须求有,定义如下:

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

replacePrevious(route)

* Sample React Native App

var NavigatorDemo=React.createClass({

率先要精通那个导航器,可以开端的理解和Android中activity的货仓管理均等,导航器除了分界面导航功用之外,还提供分界面栈的军事拘留,分界面包车型地铁跳入和跳出。(福特ExplorerN中每二个component都一定于多个零件,一个或五个component同盟构成场景(Scene卡塔尔,场景通俗的知情就是二个降志辱身整个显示器的界面卡塔尔国

跳转到新的意况,而且重新苏醒设置整个路由栈

1、简要介绍:大多数时候大家都亟需导航器来解惑释疑各异场景(页面卡塔 尔(英语:State of Qatar)间的切换。它通过路由对象来鉴定识别差异的现象,大家那边运用的就是renderScene方法,依据钦点的路由来渲染。

render(){

生机勃勃体化代码如下

//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'

// }

//进行登记 'RubiconNProject'为项目名称 AndroidTestComponent 为运营的component

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

进度中遇到的主题素材及缓慢解决方案:

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

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

Navigator.SceneConfigs.VerticalDownSwipeJump

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

/>

Navigator属性介绍

Navigator中包涵如下属性:

2.1  常用的导航器方法**

replacePrevious(route)- 替换上意气风发页的路由/视图。

return(

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}

popToTop()

replacePreviousAndPop(route)- 替换上生龙活虎页的路由/视图况兼及时切换回上风流倜傥页。

AppRegistry,

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;

...

}

NavigatorIOS在每个TabBarItem中设置

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

{ //重回上超级页面

<Navigator

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

const styles = StyleSheet.create({

configureScene  = {() =>{

return Navigator. SceneConfigs .HorizontalSwipeJump;

}}

replacePrevious(route) - 替换掉早先的场合

this.props.navigator.push(nextScene);

backButtonTitle: string,  // 再次回到开关题目

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

};

在设置TabBarItem是,只设置属性,运维之后会报那一个荒谬,是因为,TabBarItem中绝非组件,确实组件。

(1 barTintColorstring

Navigator,

leftButtonTitle: string,

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

});

itemWrapperStyle    View#style

代码:

//var prevScene={componment:FirstScene};

在那读书进程中碰着的难题:

( 6 tintColorstring

);

react中的路由的积累格局经过栈来存款和储蓄的,有先进后出的特色。

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

},

再次回到最顶层的路由。

导航器标题的文字颜色。

return(

Navigator.SceneConfigs.FloatFromRight

*

Text,

1.2导航属性

(3 itemWrapperStyleView#style

backgroundColor:'#06f',

letComponent=route.component;

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

});

原理图:

二、NavigatorIOS

backgroundColor: '#F5FCFF',

多少个布尔值,决定是或不是导航条是半透明的。

replace(route) - 用一个新的路由替换掉当前气象

});

导航器中的组件的暗许属性。贰个遍布的用项是设置有着页面包车型地铁背景颜色。

*

var nextScene={component:SecondScene};

navigationBar    node

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

container: {

因而当大家拿到route中的component的时候,大家就足以将navigator传递给它,正因为这么,大家的组件HomeScene工夫够因此  this.props.navigator,得到路由。

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

Go prevPage

jumpBack() 

1、NavigatorIOS包装了UIKit的领航效率,能够动用左划作用来回到到上大器晚成分界面。

return(

passProps: object,   // 传递的参数

本文由胜博发-前端发布,转载请注明来源://第二场景澳门博发娱乐官网,iOS中使用Navigati