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

本站文章均为  李华明Himi 原创,转载务必在明显处注明： 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2248.html

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

一：Navigator

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

首先我们导入 Navigator 组件：

1 2 3 4 5

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 都填写的为FirstPage

2. <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两个函数进行切换下一页面与回到上个页面操作。

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

1 2 3 4 5 6 7 8 9

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

 

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

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