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

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

一：Navigator

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

首先我们导入 Navigator 组件：

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

使用方式：

render() {    return (        
    
      {               return Navigator.SceneConfigs.HorizontalSwipeJump;            }}            renderScene={(route, navigator) => {            let Component = route.component;            return 
                 }}           />  )}
    

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

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

name: 组件名

component: 组件Class名

Himi导入FirstPage时如下：

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 :

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 (		
    			
     
      Himi React Native 教程 			
      
        			
       
         			    
        
          点击我进入[SecondPage]个页面 						    	  )} };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两个函数进行切换下一页面与回到上个页面操作。

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

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

还需要强调的是params，此参数是页面切换时传入下个页面的参数书写形式。

    获取时，直接 this.props.titleText 即可得到，简单、方便。

 下面代码段演示如何返回上个页面：

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

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

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

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 (		
    			
     
       ThreePage             
      
                
       
                     
        
           返回[SecondPage]页面                     )} };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,  },  });
        
       
      
     
    

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

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