ReactNative学习实践,使用导航Navigator

ReactNative学习实践:Navigator实践

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

本文小编: 伯乐在线 –
D.son
。未经作者许可,禁止转发!
欢迎加入伯乐在线 专栏撰稿人。

离上次写RN笔记有一段时间了,时期参与了一个新品类,只在新近的空余时间持续读书实践,因而进程正如缓慢,可是那并不表示没有新进展,其实那几个小东西离上次发文时早已有了一定大的扭转了,其中影响最大的转移就是引入了Redux,前边会系统介绍一下。
在开首主旨从前,先添补某些上回说到的动画初探(像我这么可信赖严酷的攻城狮,必须革新,┗|`O′|┛
嗷~~)。

上回文说到,经过我们和好定义了余弦动画函数之后,动态设定state的4个参数,落成了相比流畅的加载动画,那里可能有朋友曾经注意到了,大家极度频仍的调用了setState方法,那在React和RN中都是出色避忌的,每几回setState都会触发render方法,也就代表更频仍的杜撰DOM相比较,越发是在RN中,那还表示更频仍的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

器重是效仿了一个新用户注册流程,落成起来也并不复杂,全体结构是用一个RN组件Navigator来做导航,即使有另一个NavigatorIOS组件在iOS系统上展现越来越精良,不过考虑到RN本身希望可以同时在安卓和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 导航器

接触了RN之后,必不可免得要接触界面之间跳转之类的需求,而这一类须要的已毕必须求拔取到Navigator这一个导航器,这一次记录一下行使进程中对于Navigator导航器的咀嚼。

打赏帮衬我写出越来越多好小说,谢谢!

任选一种支付格局

美高梅开户网址 4
美高梅开户网址 5

1 赞 3 收藏
评论

1、不难介绍:大部分时候大家都亟待导航器来回应分歧情形(页面)间的切换。它经过路由对象来鉴别分歧的景观,大家那里运用的就是renderScene方法,根据指定的路由来渲染。

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

先是要知道这么些导航器,可以初叶的了然和Android中activity的库房管理均等,导航器除了界面导航成效之外,还提供界面栈的田间管理,界面的跳入和跳出。(RN中每一个component都一定于一个组件,一个或三个component共同整合场景(Scene),场景通俗的敞亮就是一个占据整个显示器的界面)

关于小编:D.son

美高梅开户网址 6

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

美高梅开户网址 7

2、利用Navigator弹出用到的艺术:

import React, { Component } from ‘react’;

RN中的入口是index.android.js(以Android为例),这几个index.js可以当做整个RN组建的框架,一些基础的事物都在此地实例化、定义。我们的导航器也须要在这几个文件中被创立。(后文中涉及的BackAndroid也在那么些中定义)

(1initialRoute={{ name: ‘home’, component: HomeScene }}
这些指定了默许的页面,也就是开行的组件页面

import {

Navigator属性介绍

Navigator中富含如下属性:

(2configureScene={() => {

AppRegistry,

initialRoute

开头化路由,开首化须求出示的Component,其中的component参数必需求有,定义如下:

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

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// 左侧弹出

ReactNative学习实践,使用导航Navigator。}else if(route.type ==’Right’) {

returnNavigator.SceneConfigs.FloatFromRight//右侧弹出

}

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

}

}}

Text,

renderScene

此情此景渲染,按照路由来确定要挂载渲染的现象,设置如下:

零件中定义

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

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

_scene(route, navigator) {

console.log(route)

//那几个里面尽管不做处理,默许再次回到的是initialRoute初始化的component

letComponent= route.component;

//路由器的params可以指点参数

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

return

//或者直接引入一个现成的Component

//return

}

本条是页面之间跳转时候的卡通片,可以看这么些目录:

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;

}

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}

(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’

// }

//举办挂号 ‘RNProject’为项目名称 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’;

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

//第四个现象

全部代码:

var FirstScene=React.createClass({

/**

pressPush:function()

* Sample React Native App

{ //推出下一流别页面

*

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);

增补部分也许会用到的Navigator方法:

},

getCurrentRoutes() –
获取当前栈里的路由,也就是push进来,没有pop掉的那么些。

render(){

jumpBack() –
跳回此前的路由,当然前提是保存现在的,仍能再跳回来,会给您保存原样。

return(

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

Go NextPage

jumpTo(route) – 跳转到已有的场景并且不卸载。

);

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

}

pop() – 跳转回来还要卸载掉当前气象

});

replace(route) – 用一个新的路由替换掉当前光景

//第二场景

replaceAtIndex(route, index) – 替换掉指定连串的路由场景

var SecondScene=React.createClass({

replacePrevious(route) – 替换掉以前的情形

pressPop:function()

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

{ //再次来到上一流页面

popToRoute(route) – pop到路由指定的现象,其余的气象将会卸载。

//var prevScene={componment:FirstScene};

popToTop() – pop到栈中的第三个场景,卸载掉所有的其余场景。

this.props.navigator.pop();       //直接回到上一流页面不须求pop参数

二、NavigatorIOS

},

1、NavigatorIOS包装了UIKit的导航功效,可以选择左划效率来回到到上一界面。

render(){

2、同上带有的措施有:

return(

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

Go prevPage

pop()- 回到上一页。

);

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

}

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

});

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

var NavigatorDemo=React.createClass({

replacePreviousAndPop(route)-
替换上一页的路由/视图并且及时切换回上一页。

render(){

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

var rootRoute={

popToRoute(route)- 平素回到某个指定的路由。

component:FirstScene

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

};

代码:

return(

/**

initialRoute={rootRoute}                       /*  制定起先默许页面*/

* Sample React Native App

configureScene={(route)=>{

*

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

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

}}

回调函数基本相同,不过注意还有一对对导航栏的控制,例如:

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

(1 barTintColorstring

var Component=route.component;

导航条的背景颜色。

return(

(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传递到下一个风貌*/

NavigatorIOS使用”路由”对象来含有要渲染的子视图、它们的质量、以及导航条配置。”push”和其余别的的领航函数的参数都是如此的路由对象。

route={route}/>                                      
 /*将route传递到下一个场景*/

(3
itemWrapperStyleView#style

);

导航器中的组件的默许属性。一个广大的用途是安装富有页面的背景颜色。

}}

(4 navigationBarHiddenbool

/>

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

);

( 5 shadowHiddenbool

}

一个布尔值,决定是或不是要隐藏1像素的影子

});

( 6 tintColorstring

const styles = StyleSheet.create({

导航栏上按钮的水彩。

container: {

( 7 titleTextColorstring

flex: 1,

导航器标题的文字颜色。

justifyContent: ‘center’,

(8 translucentbool

alignItems: ‘center’,

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

backgroundColor: ‘#F5FCFF’,

相关的链接地址在此处:http://www.tuicool.com/articles/z226zin

},

btn:{

padding:5,

backgroundColor:’#06f’,

borderRadius:5,

}

});

module.exports=NavigatorDemo;

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图