这是一个简单的例子,用Navigator来跳转页面,页面之间传递参数 (代码是ES6语法写的):


import React from 'react';
import {
View,
Navigator
} from 'react-native';
import FirstPageComponent from './FirstPageComponent'; export default class SampleComponent extends React.Component {
render() {
let defaultName = 'FirstPageComponent';
let defaultComponent = FirstPageComponent;
return (
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);
}
}

这里来解释一下代码:

第三行: 一个初始首页的component名字,比如我写了一个component叫HomeComponent,那么这个name就是这个组件的名字【HomeComponent】了。

第四行: 这个组件的Class,用来一会儿实例化成 <Component />标签

第七行: initialRoute={{ name: defaultName, component: defaultComponent }} 这个指定了默认的页面,也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。(注意这里填什么参数纯粹是自定义的,因为这个参数也是你自己发自己收,自己在renderScene方法中处理。我们这里示例用了两个参数,但其实真正使用的参数只有component)

第八,九,十行: configureScene={() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}} 这个是页面之间跳转时候的动画,具体有哪些?可以看这个目录下,有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

最后的几行: renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);

这里是每个人最疑惑的,我们先看到回调里的两个参数:route, navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货,navigator是一个Navigator的对象,为什么呢,因为它有push pop jump...等方法,这是我们等下用来跳转页面用的那个navigator对象。

return <Component {...route.params} navigator={navigator} />

这里有一个判断,也就是如果传递进来的component存在,那我们就是返回一个这个component,结合前面 initialRoute 的参数,我们就是知道,这是一个会被render出来给用户看到的component,然后navigator作为props传递给了这个component。

所以下一步,在这个FirstPageComponent里面,我们可以直接拿到这个 props.navigator:

import React from 'react';
import {
View,
Navigator
} from 'react-native'; import SecondPageComponent from './SecondPageComponent'; export default class FirstPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
_pressButton() {
const { navigator } = this.props;
//为什么这里可以取得 props.navigator?请看上文:
//<Component {...route.params} navigator={navigator} />
//这里传递了navigator作为props
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
})
}
}
render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳转</Text>
</TouchableOpacity>
</View>
);
}
}

这个里面创建了一个可以点击的区域,让我们点击可以跳到SecondPageComponent这个页面,实现页面的跳转。
现在来创建SecondPageComponent,并且让它可以再跳回FirstPageComponent:

import React from 'react';
import {
View,
Navigator
} from 'react-native'; import FirstPageComponent from './FirstPageComponent'; export default class SecondPageComponent extends React.Component { constructor(props) {
super(props);
this.state = {};
} _pressButton() {
const { navigator } = this.props;
if(navigator) {
//很熟悉吧,入栈出栈~ 把当前的页面pop掉,这里就返回到了上一个页面:FirstPageComponent了
navigator.pop();
}
} render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}

大功告成,能进能出了。

关于官方文档里有个东西,这里说一下:

getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些
jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了
jumpTo(route) - Transition to an existing scene without unmounting
push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to
pop() - Transition back and unmount the current scene
replace(route) - Replace the current scene with a new route
replaceAtIndex(route, index) - Replace a scene as specified by an index
replacePrevious(route) - Replace the previous scene
immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes
popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted
popToTop() - Pop to the first scene in the stack, unmounting every other scene

这些都是navigator可以用的public method,就是跳转用的,里面有些带参数的XXX(route),新手第一次看这个文档会疑惑,这个route参数是啥呢,这个route就是:

renderScene={(route, navigator) =>

这里的route,最基本的route就是:

var route = {
component: LoginComponent
}

这种格式。这个地方有点模糊的,在这里先说清楚了。

然后下面要讨论,怎么传递参数过去,或者从对方获取参数。
传递参数,通过push就可以了。
比如在一个 press的事件里:

//FirstPageComponent.js
import React from 'react';
import {
View,
Navigator
} from 'react-native'; import SecondPageComponent from './SecondPageComponent'; export default class FirstPageComponent extends React.Component { constructor(props) {
super(props);
this.state = {
id: 2
};
} _pressButton() {
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
//这里多出了一个 params 其实来自于<Navigator 里的一个方法的参数...
params: {
id: this.state.id
}
});
}
} render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳转并传递id</Text>
</TouchableOpacity>
</View>
);
}
}

params的来历:

// index.ios.js
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
if(route.component) {
//这里有个 { ...route.params }
return <Component {...route.params} navigator={navigator} />
}
}} />

这个语法是把 routes.params 里的每个key 作为props的一个属性:

navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
params: {
id: this.state.id
}
});

这里的 params.id 就变成了 <Navigator id={} 传递给了下一个页面。
所以 SecondPageComponent就应该这样取得 id:

//SecondPageComponent.js
import React from 'react';
import {
View,
Navigator
} from 'react-native'; import FirstPageComponent from './FirstPageComponent'; export default class SecondPageComponent extends React.Component { constructor(props) {
super(props);
this.state = {
id: null
}
} componentDidMount() {
//这里获取从FirstPageComponent传递过来的参数: id
this.setState({
id: this.props.id
});
} _pressButton() {
const { navigator } = this.props;
if(navigator) {
navigator.pop();
}
} render() {
return (
<View>
<Text>获得的参数: id={ this.state.id }</Text>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}

这样在页面间传递的参数,就可以获取了。


@sunnylqm 很多人不理解这里的params,我忍不住稍微补充一下。


然后就是返回的时候,也需要传递参数回上一个页面:
但是navigator.pop()并没有提供参数,因为pop()只是从 [路由1,路由2,路由3。。。]里把最后一个路由踢出去的操作,并不支持传递参数给倒数第二个路由,这里要用到一个概念,把上一个页面的实例或者回调方法,作为参数传递到当前页面来,在当前页面操作上一个页面的state:

这是一个查询用户信息的例子,FirstPageComponent传递id到SecondPageComponent,然后SecondPageComponent返回user信息给FirstPageComponent

//FirstPageComponent.js
import React from 'react';
import {
View,
Navigator
} from 'react-native'; import SecondPageComponent from './SecondPageComponent'; export default class FirstPageComponent extends React.Component { constructor(props) {
super(props); this.state = {
id: 2,
user: null,
}
} _pressButton() {
let _this = this;
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
params: {
id: this.state.id,
//从SecondPageComponent获取user
getUser: function(user) {
_this.setState({
user: user
})
}
}
});
}
} render() {
if( this.state.user ) {
return(
<View>
<Text>用户信息: { JSON.stringify(this.state.user) }</Text>
</View>
);
}else {
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>查询ID为{ this.state.id }的用户信息</Text>
</TouchableOpacity>
</View>
);
} }
}

然后再操作SecondPageComponent:

//SecondPageComponent.js

const USER_MODELS = {
1: { name: 'mot', age: 23 },
2: { name: '晴明大大', age: 25 }
}; import React from 'react';
import {
View,
Navigator
} from 'react-native'; import FirstPageComponent from './FirstPageComponent'; export default class SecondPageComponent extends React.Component { constructor(props) {
super(props);
this.state = {
id: null
}
} componentDidMount() {
//这里获取从FirstPageComponent传递过来的参数: id
this.setState({
id: this.props.id
});
} _pressButton() {
const { navigator } = this.props; if(this.props.getUser) {
let user = USER_MODELS[this.props.id];
this.props.getUser(user);
} if(navigator) {
navigator.pop();
}
} render() {
return(
<View>
<Text>获得的参数: id={ this.state.id }</Text>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}

Navigator的更多相关文章

  1. H5 Notes:Navigator Geolocation

    H5的地理位置API可以帮助我们来获取用户的地理位置,经纬度.海拔等,因此我们可以利用该API做天气应用.地图服务等. Geolocation对象是我们获取地理位置用到的对象. 首先判断浏览器是否支持 ...

  2. react-native的tabbar和navigator混合使用

    前段时间搭建项目使用了navigator和react-native-tab-navigator,现在我教大家搭建一个通用的简单框架. 先把几张图贴在这里,这就是我们今天要搭建的东西,别看页面简单,但是 ...

  3. React Native之 Navigator与NavigatorIOS使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  4. 完美解决window.navigator.geolocation.getCurrentPosition,在IOS10系统中无法定位问题

    目前由于许多用户都将电话升级到了iOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统.然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多 ...

  5. js中的navigator对象

    Navigator 对象包含有关浏览器的信息.所有浏览器都支持该对象 在控制台中输出相关信息的代码 <script> console.log(navigator); </script ...

  6. JS新API标准 地理定位(navigator.geolocation)/////////zzzzzzzzzzz

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  7. 代码阅读工具:Source Navigator和Source Insight

    (摘自http://www.cnblogs.com/yc_sunniwell/archive/2010/08/25/1808322.html) 一.Source Insight实用技巧: Source ...

  8. JS新API标准 地理定位(navigator.geolocation)

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  9. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

随机推荐

  1. RestTemplate配置

    什么是RestTemplate? RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效 ...

  2. iOS程序中的内存分配 栈区堆区全局区

    在计算机系统中,运行的应用程序的数据都是保存在内存中的,不同类型的数据,保存的内存区域不同.一.内存分区 栈区(stack) 由编译器自动分配并释放,存放函数的参数值,局部变量等.栈是系统数据结构,对 ...

  3. spark转换集合为RDD

    SparkContext可以通过parallelize把一个集合转换为RDD def main(args: Array[String]): Unit = { val conf = new SparkC ...

  4. ms-sql关联表操作

    1.创建数据库employee : create database employee;2.创建员工表EMP:use employee;create table EMP( id int,sex varc ...

  5. AngularJS Best Practices: ng-include vs directive

    For building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the ...

  6. 基于DevExpress ImageSlider实现图片轮播效果

    工具:DevExpress版本为15.2.7 1.控件类型全称:DevExpress.XtraEditors.Controls.ImageSlider 2.控件所在程序集:DevExpress.Xtr ...

  7. [pyqt4]mark

    sip SIP must be installed before building and using PyQt4 必须安装sip首先 https://riverbankcomputing.com/s ...

  8. Python爬虫爬取豆瓣电影名称和链接,分别存入txt,excel和数据库

    前提条件是python操作excel和数据库的环境配置是完整的,这个需要在python中安装导入相关依赖包: 实现的具体代码如下: #!/usr/bin/python# -*- coding: utf ...

  9. 使用Python统计深圳市公租房申请人省份年龄统计

    使用Python,HtmlParser来统计深圳市保障房申请人的原籍省份分布,年龄分布等.从侧面可以反映鹏城人的地域分布.以下python代码增大了每一次获取的记录数,从而少提交几次请求.如果按照WE ...

  10. Hadoop:操作 Hadoop Cluster

    启动Hadoop 当完成所有的必要配置后,将HADOOP_CONF_DIR目录中的所有配置文件复制到所有机器,建议将HDFS和YARN后台进程一不同的用户身份运行,比如运行HDFS进程们的用户为hdf ...