ReactNative學習筆記（七）Navigator的使用

前言

Navigator主要用於ReactNative中的跳轉，中文文檔：

http://reactnative.cn/docs/0.39/using-navigators.html

懶得打字介紹更多了，將上面的官網文檔看一遍之后應該有個大概了解了。

• initialRoute 配置初始路由參數；
• configureScene 用於配置場景動畫；
• renderScene 指示具體如何渲染一個場景；
• 一個可選的導航欄組件，個人感覺這個不太好用，一般不用它；
• {...route.passProps}用於批量傳遞參數到this.props

簡單示例

下面寫了一個最簡單的頁面跳轉與返回的例子test-navigator-no-bar.js：

效果圖：

import React, { Component } from 'react';
import { AppRegistry, Text, Image, View, StyleSheet, Navigator, TouchableOpacity } from 'react-native';

// 一個簡單的navigator使用示例
export default class TestNavigator extends Component
{
	configureScene(route, routeStack)
	{
		return Navigator.SceneConfigs.PushFromRight;
	}
	render()
	{
		return (
			<Navigator
				style={{flex:1}}
				initialRoute={{component: FirstPage}}
				configureScene={this.configureScene}
				renderScene={(route, navigator) => <route.component navigator={navigator} {...route.passProps} />} />
		);
	}
}

// 首頁
class FirstPage extends Component
{
	render()
	{
		return (
			<View>
				<TouchableOpacity onPress={() => this.props.navigator.push({component: SecondPage})}>
					<Text style={{fontSize:28}}>點擊跳轉到二級頁面</Text>
				</TouchableOpacity>
			</View>
		);
	}
}

// 二級頁面
class SecondPage extends Component
{
	render()
	{
		return (
			<View>
				<TouchableOpacity onPress={()=>this.props.navigator.pop()}>
					<Text style={{color: 'red', fontSize: 28}}>點擊返回首頁</Text>
				</TouchableOpacity>
			</View>
		);
	}
}

帶導航的示例

效果圖：

完整代碼如下（test-navigator-with-bar.js）：

import React, { Component } from 'react';
import { AppRegistry, Text, Image, View, StyleSheet, TextInput, ScrollView, ListView, Navigator, TouchableOpacity } from 'react-native';


// 一個簡單的navigator使用示例
export default class TestNavigator extends Component
{

	configureScene(route, routeStack)
	{
		if (route.type == 'Modal') {
			return Navigator.SceneConfigs.FloatFromBottom;
		}
		return Navigator.SceneConfigs.PushFromRight;
	}

	render()
	{
		return (
			<Navigator
				style={{flex:1}}
				initialRoute={{component: FirstPage, passProps: {title: '首頁', rightText: '菜單'}}}
				configureScene={this.configureScene}
				renderScene={(route, navigator) => <route.component route={route} navigator={navigator} {...route.passProps} />}
				navigationBar={
					<Navigator.NavigationBar
						style={styles.navContainer}
						routeMapper={NavigationBarRouteMapper}/>} />
		);
	}
}

// 首頁
class FirstPage extends Component
{
	/**
	 * 跳轉
	 */
	gotoPage(component, title)
	{
		this.props.navigator.push(
		{
			component: component,
			passProps: {
				title: '二級頁面',
				lastPageTitle: this.props.title
			}
		})
	}

	render()
	{
		return (
			<View style={{paddingTop: 80}}>
				<TouchableOpacity onPress={() => this.gotoPage(SecondPage, '二級頁面')}>
					<Text style={{fontSize:28, padding: 10}}>點擊跳轉到二級頁面</Text>
				</TouchableOpacity>
				<Text style={{padding: 10, fontSize: 20}}>這是首頁，這是首頁，這是首頁，這是首頁，這是首頁，這是首頁，這是首頁，這是首頁，這是首頁，這是首頁，這是首頁</Text>
			</View>
		);
	}
}

// 二級頁面
class SecondPage extends Component
{
	render()
	{
		return (
			<View style={{paddingTop: 80}}>
				<TouchableOpacity
					style={styles.button}
					onPress={()=>this.props.navigator.pop()}>
					<Text style={styles.buttonText}>
						點擊返回{this.props.lastPageTitle}
					</Text>
				</TouchableOpacity>
			</View>
		);
	}
}

// 導航欄的Mapper
var NavigationBarRouteMapper =
{
	// 左鍵
	LeftButton(route, navigator, index, navState)
	{
		if (index <= 0) return null;
		return (
			<TouchableOpacity
				underlayColor='transparent'
				onPress={() => {if (index > 0) {navigator.pop()}}}>
				<Text style={styles.leftNavButtonText}>
					返回
				</Text>
			</TouchableOpacity>
		);
	},
	// 右鍵
	RightButton(route, navigator, index, navState)
	{
		if(!route.passProps.rightText) return null;
		return (
			<TouchableOpacity
				onPress={() => alert('測試菜單')}>
				<Text style={styles.rightNavButtonText}>
					{route.passProps.rightText}
				</Text>
			</TouchableOpacity>
		);
	},
	// 標題
	Title(route, navigator, index, navState)
	{
		return (
			<Text style={styles.title}>
				{route.passProps.title || '默認標題'}
			</Text>
		);
	}
};


var styles = StyleSheet.create({
	// 頁面框架
	container: {
		flex: 4,
		marginTop: 100,
		flexDirection: 'column'
	},
	// 導航欄
	navContainer: {
		backgroundColor: '#41ABF7',
		paddingTop: 12,
		paddingBottom: 10,
		flex: 1
	},
	// 導航欄文字
	headText: {
		color: '#ffffff',
		fontSize: 22
	},
	// 按鈕
	button: {
		height: 120,
		marginTop: 10,
		justifyContent: 'center', // 內容居中顯示
		backgroundColor: '#ff1049',
		alignItems: 'center'
	},
	// 按鈕文字
	buttonText: {
		fontSize: 18,
		color: '#ffffff'
	},
	// 左面導航按鈕
	leftNavButtonText: {
		color: '#ffffff',
		fontSize: 18,
		marginLeft: 13,
		marginTop: 12,
		flex: 1
	},
	// 右面導航按鈕
	rightNavButtonText: {
		color: '#ffffff',
		fontSize: 18,
		marginRight: 13,
		marginTop: 12,
		flex: 1
	},
	// 標題
	title: {
		fontSize: 18,
		color: '#fff',
		textAlign: 'center',
		alignItems: 'center',
		justifyContent: 'center',
		fontWeight: 'bold',
		marginTop: 12
	}
});

關於動畫

所有可用的場景動畫：

console.log(Navigator.SceneConfigs);

其它

判斷一個頁面是否能夠繼續返回：

var navigator = this.props.navigator;
if(navigator.getCurrentRoutes().length > 1)
{
	navigator.pop();
}
else
{
	alert('不能再返回了！');
}