說明：從0.44版本開始脚作，Navigator被從react native的核心組件庫中剝離到了一個名為react-native-deprecated-custom-components的單獨模塊中擎宝，而且官方推薦使用React Navigation導航組件关炼，這個已經(jīng)默認為官方推薦了。
1.StackNavigator導航
這就是一般的導航器，默認情況下，StackNavigator配置為具有熟悉的iOS和Android外觀：iOS上的新屏幕從右側(cè)滑出丑搔，從Android的底部漸隱，在iOS上提揍，StackNavigator也可以配置為模式樣式低匙，屏幕從底部滑入。寫這篇文章的時候碳锈，我還沒有找到在安卓設備上改變進出動畫的配置顽冶。
使用介紹：
在入口文件處定義：這里簡化了文件間的依賴關(guān)系。
import {StackNavigator} from 'react-navigation';
import Home from './test/Home';
import Page from './test/Page';
const gewdDemo01 = StackNavigator({
Home: {screen: Home},
Page: {screen: Page}
},{
initialRouteName: 'Home', // 默認顯示界面
}
);
AppRegistry.registerComponent('gewdDemo01', () => gewdDemo01);
這樣的話售碳，是默認加上官方的導航欄效果的强重，如果想去掉的話，可以設置為：
const gewdDemo01 = StackNavigator({
Home: {screen: Home},
Page: {screen: Page}
},{
initialRouteName: 'Home', // 默認顯示界面
headerMode: 'none'
}
);
導航整體配置列表：
- initialRouteName：設置堆棧的默認頁面
- initialRouteParams：初始路由的參數(shù)
- navigationOptions： 屏幕導航的默認選項
- paths：route config里面路徑設置的映射
- mode：定義渲染和轉(zhuǎn)換的樣式
1.card：使用標準的iOS和Android屏幕轉(zhuǎn)換贸人。這是默認值间景。
2.modal：使屏幕從底部滑入，這是一種常見的iOS模式艺智。
只適用于iOS倘要，對Android無影響 - headerMode：指定標題應如何呈現(xiàn)
1.float：渲染一個保持在頂部的標題，并在屏幕更改時顯示動畫十拣。
這是iOS上的常見模式
2.screen：每個屏幕都有一個標題封拧，標題與屏幕一起淡入淡出。
這是Android上的常見模式
3.none：不會顯示標題 - cardStyle：使用此支路覆蓋或擴展堆疊中單個卡的默認樣式
- transitionConfig：返回覆蓋默認屏幕轉(zhuǎn)換的對象的函數(shù)
- onTransitionStart：當路由轉(zhuǎn)換動畫即將開始時被調(diào)用的功能
- onTransitionEnd：一旦轉(zhuǎn)換動畫完成夭问，將被調(diào)用的功能
查看Home文件：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class Home extends Component {
static navigationOptions = {
title: 'Home',
}
constructor(props){
super(props);
}
gotoPage(){
const {navigate} = this.props.navigation;
navigate('Page',{
user:'Page'
});
}
render() {
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#888888'}}>
<Text>Home</Text>
<View style={{width:100,height:40,backgroundColor:'red',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'#fff'}} onPress={()=>{this.gotoPage()}}>點擊跳轉(zhuǎn)</Text>
</View>
</View>
);
}
}
分析gotoPage方法泽西，navigate('組件名稱')，意思是跳轉(zhuǎn)到相應的頁面缰趋，這是在上面的入口文件中定義好的捧杉，我們只需要傳遞即可陕见，并且要加引號。后面的{}里的內(nèi)容是傳遞的參數(shù)味抖，在Page頁面中我們可以通過如下代碼拿到他們：
componentDidMount() {
// 傳參
const {params} = this.props.navigation.state;
console.log(params.user);
}
查看Page頁面：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button
} from 'react-native';
export default class Page extends Component {
static navigationOptions = ({navigation}) => {
return {
title:`Hello ${navigation.state.params.user}`,
headerStyle:{
backgroundColor:'pink' // 導航條樣式
},
headerTintColor:'blue' // 標題文字顏色
}
}
constructor(props){
super(props);
}
gobackToHome(){
// 返回
this.props.navigation.goBack()
}
componentDidMount() {
// 傳參
const {params} = this.props.navigation.state;
console.log(params.id);
}
render() {
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#888888'}}>
<Text>Page</Text>
<View style={{width:100,height:40,backgroundColor:'green',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'#fff'}} onPress={()=>{this.gobackToHome()}}>返回</Text>
</View>
</View>
);
}
}
默認的返回是在導航條上的箭頭按鈕评甜，并且返回鍵退出也已經(jīng)封裝好了。
navigationOptions是對導航部分的配置項仔涩，注意寫法蜕着，這種寫法是比較實用的，因為可以拿到父組件傳過來的參數(shù)作為標題的一部分顯示红柱，而且不影響配置項的設置。
配置項有很多蓖乘，詳細請看如下列表：
- title: 標題顯示
- header：可以返回一個組件進行顯示,當然也可以不讓這個組件展示標題锤悄，還是很靈活的
- headerTitle：組件標題
- headerBackTitle：iOS上的后退按鈕使用的標題字符串
- headerTruncatedBackTitle：當headerBackTitle不適合屏幕時，返回按鈕使用的標題字符串嘉抒。
默認情況下為“返回” - headerRight：標題的右側(cè)的顯示元素
- headerLeft：標題的左側(cè)的顯示元素
- headerStyle：標題欄的樣式
- headerTitleStyle：標題欄title的樣式
- headerBackTitleStyle：返回元素的樣式
- headerTintColor：標題顏色
- headerPressColorAndroid：顏色紋理（Android> = 5.0）
- gesturesEnabled：是否可以使用手勢關(guān)閉此屏幕零聚。
在iOS上默認為true，Android上為false
演示效果如圖：
router.gif
