【REACT NATIVE 系列教程之五】NAVIGATOR(頁面導航)的基本使用與傳參

本站文章均爲 李華明Himi 原創,轉載務必在明顯處註明： 
轉載自【黑米GameDev街區】 原文鏈接: http://www.himigame.com/react-native/2248.html

今天介紹一種應用開發中常用的負責頁面切換及導航功能的組件：Navigator

一：Navigator

對於頁面導航其實主要功能就是：每個頁面都知道本身應該切換到哪個頁面，並且切到的頁面會記錄從哪裏來，如果要返回的話，知道返回到哪個頁面。這一切都不需要再用邏輯管理！而且每個頁面之間也可以進行參數傳遞，很方便的組件。廢話不多說：先上示例代碼：

首先我們導入 Navigator 組件：

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

使用方式：

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時如下：

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 (
		<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兩個函數進行切換下一頁面與回到上個頁面操作。

下面代碼段演示瞭如何切換到下一個頁面：

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

運行效果圖：（點擊查看動態效果）

從上圖效果可以看出，切換之間的頁面可以直接通過手勢滑動進行切換～:)