【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参

http://blog.csdn.net/xiaominghimi/article/details/51492531
http://blog.csdn.net/xiaominghimi/article/details/51492531 http://blog.csdn.net/xiaominghimi/article/details/51492531

【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参

标签： himireactnative导航navigator
2016-05-24 18:30 1164人阅读 评论(0) 收藏 举报


分类：

【React Native 跨平台应用开发】（13）


版权声明：本文为博主原创文章，未经博主允许不得转载。

本站文章均为 李华明Himi 原创,转载务必在明显处注明：

转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2248.html

今天介绍一种应用开发中常用的负责页面切换及导航功能的组件：Navigator

一：Navigator

对于页面导航其实主要功能就是：每个页面都知道本身应该切换到哪个页面，并且切到的页面会记录从哪里来，如果要返回的话，知道返回到哪个页面。这一切都不需要再用逻辑管理！而且每个页面之间也可以进行参数传递，很方便的组件。废话不多说：先上示例代码：

首先我们导入 Navigator 组件：

12345

import React, { ... Navigator, ...} from 'react-native';

使用方式：

1 2 3 4 5 6 7 8 9 10 11 12 13

render() { return ( <Navigator initialRoute={{ name: 'FirstPage', component: FirstPage }} configureScene={(route) => { return Navigator.SceneConfigs.HorizontalSwipeJump; }} renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator}/> }} /> )}

上面的代码，初始化了导航组件，且设置默认显示页面为 FirstPage，这里需要注意两点：

1. 我们主要关注 Navigator 里 initialRoute 中的 两个参数：

name: 组件名

component: 组件Class名

Himi导入FirstPage时如下：

1	import FirstPage from './FirstPage'

所以 name 和 component 都填写的为FirstPage2. <Component {…route.params} navigator={navigator} />上面这一行是将navigator作为props进行传递3. Navigator.SceneConfigs.HorizontalSwipeJump上面一行是设置页面切换之间的动画效果，更多效果查看源文件：node_modules/React-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js下面我们看下FirstPage.js :

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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

import React, { AppRegistry, Component, View, Text, StyleSheet, TouchableHighlight, } from 'react-native'; import SecondPage from './SecondPage'; class FirstPage extends React.Component { constructor(props) { super(props); this.state = { }; } nextEvent(){ const { navigator } = this.props; if(navigator) { navigator.push({ name: 'SecondPage', component: SecondPage, params: { titleText:'' } }) } } render() { return ( <View style={styles.himiViewStyle} > <Text style={styles.himiTextStyle}>Himi React Native 教程 </Text> <View style={styles.himiViewStyle}> <TouchableHighlight underlayColor='#4169e1' onPress={this.nextEvent.bind(this)} > <Text style={styles.text} > 点击我进入[SecondPage]个页面 </Text> </TouchableHighlight> </View> </View> )} }; var styles = StyleSheet.create({ text: { color:'#f00', fontSize:20, }, himiViewStyle:{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, himiTextStyle:{ color:'#f00', fontSize:30, marginTop:70, }, }); module.exports = FirstPage;

这里我们主要看 nextEvent 函数内容，

const
{ navigator } = this.props; 这一句是以props传递过来的navigator进行接收。

得到Navigator组件，可以利用其 push 与pop两个函数进行切换下一页面与回到上个页面操作。

下面代码段演示了如何切换到下一个页面：

123456789

if(navigator) { //判断是否正常接收到传来的导航组件 navigator.push({ //利用此函数进行切换到指定页面 name: 'SecondPage',//目标组件名 component: SecondPage, //目标组件Class名 params: { titleText:'' } })}

还需要强调的是params，此参数是页面切换时传入下个页面的参数书写形式。 获取时，直接 this.props.titleText 即可得到，简单、方便。 下面代码段演示如何返回上个页面：

1 2 3 4

const { navigator } = this.props; if(navigator) { navigator.pop(); }

返回上一页面就十分简单了，不多赘述了。

Himi这里为了演示效果，所以下面把 ThreePage.js也给出源码：（最后附上动态效果图）

JavaScript

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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

import React, { AppRegistry, Component, View, Text, Alert, StyleSheet, TouchableHighlight, } from 'react-native'; export default class threePage extends React.Component { constructor(props) { super(props); this.state = { }; } backEvent(){ const { navigator } = this.props; if(navigator) { navigator.pop(); } } render() { return ( <View style={styles.himiViewStyle} > <Text style={styles.himiTextStyle}> ThreePage </Text> <View style={styles.himiViewStyle}> <TouchableHighlight underlayColor='#4169e1' onPress={this.backEvent.bind(this)} > <Text style={styles.text} > 返回[SecondPage]页面 </Text> </TouchableHighlight> </View> </View> )} }; var styles = StyleSheet.create({ text: { color:'#f00', fontSize:20, }, himiViewStyle:{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, himiTextStyle:{ color:'#f00', fontSize:30, marginTop:70, }, });

运行效果图：（点击查看动态效果）





从上图效果可以看出，切换之间的页面可以直接通过手势滑动进行切换～:)