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

標籤：導航   native   himi   react   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,  },  });

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

650) this.width=650;" class="alignnone size-medium wp-image-2249" src="http://www.himigame.com/wp-content/uploads/2016/05/user23-162x300.gif" alt="user23" width="162" height="300" style="margin:0px;padding:1px;border:1px solid rgb(97,146,140);font-family:inherit;font-size:inherit;font-style:inherit;line-height:inherit;height:auto;" />

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

本文出自 “李華明Himi” 部落格，請務必保留此出處http://xiaominghimi.blog.51cto.com/2614927/1782626

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