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

今天介绍一种应用开发中常用的负责页面切换及导航功能的组件：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 , 
    } , 
    
 } ) ; 
 