文檔地址
一、Navigator
很多時候，我們需要導航器來應對不同場景（頁面）間的切換。它通過路由對象來分辨不同的場景，我們這里采用的就是 renderScene 方法，根據指定的路由來渲染。
1.1 常用的屬性
- initialRoute ={{ name: 'home', component: HomeScene }}
這個指定了默認的頁面，也就是啟動的組件頁面 - configureScene ={() => {
return Navigator. SceneConfigs .HorizontalSwipeJump;
}}
頁面之間跳轉時候的動畫手勢，可以看這個目錄:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳轉的時候的方向)，比如：PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump等等。
- renderScene
具體是方法如下:(route, navigator) => <MySceneComponent title={route.title} navigator={navigator} />
兩個參數中的route包含的是initial的時候傳遞的name和component，而navigator是一個我們需要用的Navigator的對象；
所以當我們拿到route中的component的時候，我們就可以將navigator傳遞給它，正因為如此，我們的組件HomeScene才可以通過 this.props.navigator，拿到路由。
initialRouteStack [object] 參數對象數組
這是一個初始化的路由數組進行初始化。如果initalRoute屬性沒有設置的話，那么就必須設置initialRouteStack屬性，使用該最后一項作為初始路由。 如果initalRouteStack屬性沒有設置的話，該會生成只包含initalRoute值的數組navigationBar node
該為可選的參數，在頁面切換中用來提供一個導航欄navigator object
該為可選參數，可以從父類導航器中獲取導航器對象sceneStyle 樣式風格
該繼承了View視圖的所有樣式風格，用于設置每個頁面容器的風格
1.2 常用的導航器方法
當獲取了導航器對象的引用，我們可以進行調用以下一些方法來實現頁面導航功能:
- getCurrentRoutes() 該進行返回存在的路由列表信息
- jumpBack() 該進行回退操作 但是該不會卸載(刪除)當前的頁面
- jumpForward() 進行跳轉到相當于當前頁面的下一個頁面
- jumpTo(route) 根據傳入的一個路由信息，跳轉到一個指定的頁面(該頁面不會卸載刪除)
- push(route) 導航切換到一個新的頁面中，新的頁面進行壓入棧。通過jumpForward()方法可以回退過去
- pop() 當前頁面彈出來，跳轉到棧中下一個頁面，并且卸載刪除掉當前的頁面
- replace(route) 只用傳入的路由的指定頁面進行替換掉當前的頁面
- replaceAtIndex(route,index) 傳入路由以及位置索引，使用該路由指定的頁面跳轉到指定位置的頁面
- replacePrevious(route) 傳入路由，通過指定路由的頁面替換掉前一個頁面
- resetTo(route) 進行導航到新的界面，并且重置整個路由棧
- immediatelyResetRouteStack(routeStack) 該通過一個路由頁面數組來進行重置路由棧
- popToRoute(route) 進行彈出相關頁面，跳轉到指定路由的頁面，彈出來的頁面會被卸載刪除
- popToTop() 進行彈出頁面，導航到棧中的第一個頁面，彈出來的所有頁面會被卸載刪除
1.3 默認的寫法
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.props} navigator={navigator} />
}}
/>
注意：在RN0.44之上的版本中，Navigator組件已經移植到react-native-deprecated-custom-components中，所以要遵循以下引入方式：
import {Navigator} from 'react-native-deprecated-custom-components';
二、Navigator.IOS
NavigatorIOS包裝了UIKit的導航功能，可以使用左劃功能來返回到上一界面。
2.1 常用的導航器方法
push(route)
導航器跳轉到一個新的路由。pop()
回到上一頁。popN(n)
回到N頁之前。當N=1的時候，效果和 pop() 一樣。replace(route)
替換當前頁的路由，并立即加載新路由的視圖。replacePrevious(route)
替換上一頁的路由/視圖。replacePreviousAndPop(route)
替換上一頁的路由/視圖并且立刻切換回上一頁。resetTo(route)
替換最頂級的路由并且回到它。popToRoute(route)
一直回到某個指定的路由。popToTop()
回到最頂層的路由。
2.2 常用的屬性
barTintColor string
導航條的背景顏色。initialRoute {
component: function, // 路由到對應的版塊
title: string, // 標題
passProps: object, // 傳遞的參數
backButtonIcon: Image.propTypes.source, // 返回按鈕
backButtonTitle: string, // 返回按鈕標題
leftButtonIcon:Image.propTypes.source,
leftButtonTitle: string,
onLeftButtonPress: function,
rightButtonIcon: Image.propTypes.source,
rightButtonTitle: string,
onRightButtonPress: function,
wrapperStyle: [object Object]
}
NavigatorIOS使用"路由"對象來包含要渲染的子視圖、它們的屬性、以及導航條配置。"push"和任何其它的導航函數的參數都是這樣的路由對象。
// 跳轉到新聞詳情頁面
_pushToNewsDetail(docid){
this.props.navigator.push({
component:NewsDetail, // 跳轉的頁面
passProps:{docid} // 跳轉時候攜帶的參數數據
})
}
}
itemWrapperStyle View#style
導航器中的組件的默認屬性。一個常見的用途是設置所有頁面的背景顏色。navigationBarHidden bool
一個布爾值，決定導航欄是否隱藏。shadowHidden bool
一個布爾值，決定是否要隱藏1像素的陰影。tintColor string
導航欄上按鈕的顏色。titleTextColor string
導航器標題的文字顏色。translucent bool
一個布爾值，決定是否導航條是半透明的。-
運行效果：
TabBar.gif 實例代碼：
export default class HJMain extends Component {
// 構造初始化狀態
constructor(props) {
super(props);
this.state = {
selectedItem:'Home'
};
}
render() {
return (
<TabBarIOS
// 設置選中顏色
tintColor='orange'
>
{/*首頁*/}
<TabBarIOS.Item
icon={{uri:'tabbar_home',scale:3}}
title="首頁"
translucent={true} // 透明效果
// 被選中時的圖片
selectedIcon={{uri:'tabbar_home_highlighted',scale:3}}
selected={this.state.selectedItem == 'Home'}
onPress={()=>{this.setState({selectedItem:'Home'})}}
>
<NavigatorIOS
//導航欄半透明效果 非半透明View會自動往下移
translucent={true}
style={{flex: 1}}
tintColor='orange'
initialRoute={{
component: Home, //設置根視圖
title:'新聞',
leftButtonIcon:{uri:'navigationbar_friendattention_highlighted',scale:3},
rightButtonIcon:{uri:'navigationbar_pop_highlighted',scale:3},
}}
/>
</TabBarIOS.Item>
{/*信息*/}
<TabBarIOS.Item
icon={{uri:'tabbar_message_center' , scale:3} }
title='信息'
translucent={true}
// 被選中時的圖片
selectedIcon={{uri:'tabbar_message_center_highlighted',scale:3}}
selected={this.state.selectedItem == 'Message'}
onPress={()=>{this.setState({selectedItem:'Message'})}}
>
<NavigatorIOS
//導航欄半透明效果 非半透明View會自動往下移
translucent={true}
style={{flex:1}}
titleColor="white"
initialRoute={{
component:Message,
title:'信息',
}}
/>
</TabBarIOS.Item>
{/*發現*/}
<TabBarIOS.Item
icon={{uri:'tabbar_discover',scale:3}}
title='發現'
translucent={true}
// 被選中時的圖片
selectedIcon={{uri:'tabbar_discover_highlighted',scale:3}}
selected={this.state.selectedItem == 'Discover'}
onPress={()=>{this.setState({selectedItem:'Discover'})}}
>
<NavigatorIOS
//導航欄半透明效果 非半透明View會自動往下移
translucent={true}
style={{flex:1}}
initialRoute={{
component:Find,
title:'發現',
}}
/>
</TabBarIOS.Item>
{/*我的*/}
<TabBarIOS.Item
icon={{uri:'tabbar_profile',scale:3}}
title='我'
//半透明
translucent={true}
// 被選中時的圖片
selectedIcon={{uri:'tabbar_profile_highlighted',scale:3}}
selected={this.state.selectedItem == 'Me'}
onPress={()=>this.setState({selectedItem:'Me'})}
>
<NavigatorIOS
//導航欄半透明效果 非半透明View會自動往下移
translucent={true}
style={{flex:1}}
// 導航欄顏色
barTintColor='rgba(255,255,255,0.3)'
initialRoute={{
component:Me,
title:'我',
}}
/>
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
module.exports = HJMain;
