澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站RN学习笔记之Navigator,React

2019-08-03 作者:澳门新萄京赌场网址   |   浏览(182)

ReactNative学习实践:Navigator实施

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

本文作者: 伯乐在线 - D.son 。未经作者许可,禁止转发!
招待加入伯乐在线 专栏我。

离上次写中华VN笔记有一段时间了,期间参加了三个新类型,只在近年的悠闲时间继续上学实行,因此进程正如缓慢,不过那并不意味着未有新进展,其实那几个小东西离上次发文时已经有了一对一大的转换了,当中国电影响最大的变动就是引入了Redux,后边会系统介绍一下。
在开首宗旨以前,先添补某个上回谈到的卡通初探(像自家这么可信严苛的技术员,必须革新,┗|`O′|┛ 嗷~~)。

上回文谈到,经过我们自个儿定义了余弦动画函数之后,动态设定state的4个参数,达成了相比较流畅的加载动画,这里大概有心上人曾经注意到了,我们特别频仍的调用了setState方法,那在React和LacrosseN中都是特出避讳的,每一遍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));
  }

功效如下:
澳门新萄京官方网站 1
此间有目的在于登记央浼达成之后未有遮蔽loading动画,由此同期实施了视图切换和loading七个卡通,效果还能够~

好了,该步入明日的焦点了。先全部看一下这一阶段贯彻的效果(哒哒哒~):
澳门新萄京官方网站 2

器重是效仿了贰个新用户注册流程,完结起来也并不复杂,全体结构是用三个索罗德N组件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,效果如下:
澳门新萄京官方网站 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 导航器

接触了福特ExplorerN之后,必不可免得要接触分界面之间跳转之类的急需,而这一类须要的落到实处必需要选择到Navigator这几个导航器,此番记录一下行使进程中对此Navigator导航器的咀嚼。

前言

打赏协理自个儿写出越来越多好小说,感激!

任选一种支付方式

澳门新萄京官方网站 4 澳门新萄京官方网站 5

1 赞 3 收藏 评论

1、简要介绍:大许多时候大家都亟待导航器来答复不相同场景(页面)间的切换。它经过路由对象来辨别分裂的现象,大家这里运用的就是renderScene方法,遵照钦命的路由来渲染。

从当前景观跳转到下一级场景,带转场动画

首先要驾驭那些导航器,能够起头的敞亮和Android中activity的酒馆管理均等,导航器除了分界面导航功能之外,还提供分界面栈的管制,分界面包车型大巴跳入和跳出。(牧马人N中每八个component都也便是八个零件,三个或八个component共同组成场景(Scene),场景通俗的掌握就是三个占用整个显示器的分界面)

在前边叁个的支出中,我们供给完成八个页面包车型大巴切换跳转,iOS中央银行使Navigation完结页面包车型大巴跳转,react Native中动用Navigator和NavigatorIOS来达成分化页面间的切换。

有关作者:D.son

澳门新萄京官方网站 6

80后码农兼伪文青一枚,闷骚而不木讷,猥琐不流浪荡 个人主页 · 小编的稿子 · 1

澳门新萄京官方网站 7

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

import React, { Component } from 'react';

牧马人N中的入口是index.android.js(以Android为例),这些index.js能够视作整个大切诺基N创设的框架,一些基础的事物都在此间实例化、定义。大家的导航器也急需在那一个文件中被创设。(后文中涉及的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'

// }

//进行注册 'WranglerNProject'为项目名称 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 去调用,把参数回传回来

//第二个现象

上一个主意不是调到在此以前的路由了么,用那么些跳回来就好了。

完全代码:

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

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像素的阴影

});

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

澳门新萄京官方网站RN学习笔记之Navigator,ReactNative学习实践。btn:{

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

padding:5,

configureScene={(route) => {

backgroundColor:'#06f',

returnNavigator.SceneConfigs.HorizontalSwipeJumpFromRight;

borderRadius:5,

}}

}

renderScene={(route,navigator) => {

澳门新萄京官方网站RN学习笔记之Navigator,ReactNative学习实践。});

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

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

注:本组件并非由推特官方开荒组维护。

这一零部件的开支完全由社区中坚。假设纯js的方案能够知足你的必要的话,那么大家提出你挑选Navigator组件。

原理图:

澳门新萄京官方网站 8

第一步。设置TabBar

澳门新萄京官方网站 9

NavigatorIOS在每个TabBarItem中设置

安装属性:

澳门新萄京官方网站 10

运营结果:

澳门新萄京官方网站 11

在此学习进度中遇到的主题材料:

澳门新萄京官方网站 12

在设置TabBarItem是,只设置属性,运营之后会报那些荒唐,是因为,TabBarItem中绝非组件,确实组件。

明日的总体代码就不在上传,后期会做一个差非常的少的小demo,将详细的把这段时候学习的使用一下,由于昨天有bug还可能有调节和测量试验出来,固前日就不在上传代码。

谢谢啦!!

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站RN学习笔记之Navigator,React

关键词: