RN学习笔记之Navigator,ReactNative学习实践

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

}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。RN学习笔记之Navigator,ReactNative学习实践。如下设置:

在组建中加上:

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包装了UI基特的领航功用,可以选拔左划效能来回到到上一界面。

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地图