文檔地址
一晦攒、Navigator
很多時(shí)候闽撤，我們需要導(dǎo)航器來(lái)應(yīng)對(duì)不同場(chǎng)景（頁(yè)面）間的切換。它通過(guò)路由對(duì)象來(lái)分辨不同的場(chǎng)景脯颜，我們這里采用的就是 renderScene 方法哟旗，根據(jù)指定的路由來(lái)渲染。
1.1 常用的屬性
- initialRoute ={{ name: 'home', component: HomeScene }}
這個(gè)指定了默認(rèn)的頁(yè)面伐脖，也就是啟動(dòng)的組件頁(yè)面 - configureScene ={() => {
return Navigator. SceneConfigs .HorizontalSwipeJump;
}}
頁(yè)面之間跳轉(zhuǎn)時(shí)候的動(dòng)畫(huà)手勢(shì)热幔，可以看這個(gè)目錄:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳轉(zhuǎn)的時(shí)候的方向)，比如：PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump等等讼庇。
- renderScene
具體是方法如下:(route, navigator) => <MySceneComponent title={route.title} navigator={navigator} />
兩個(gè)參數(shù)中的route包含的是initial的時(shí)候傳遞的name和component绎巨，而navigator是一個(gè)我們需要用的Navigator的對(duì)象；
所以當(dāng)我們拿到route中的component的時(shí)候蠕啄，我們就可以將navigator傳遞給它场勤，正因?yàn)槿绱耍覀兊慕M件HomeScene才可以通過(guò) this.props.navigator歼跟，拿到路由和媳。
initialRouteStack [object] 參數(shù)對(duì)象數(shù)組
這是一個(gè)初始化的路由數(shù)組進(jìn)行初始化。如果initalRoute屬性沒(méi)有設(shè)置的話哈街，那么就必須設(shè)置initialRouteStack屬性留瞳，使用該最后一項(xiàng)作為初始路由。 如果initalRouteStack屬性沒(méi)有設(shè)置的話骚秦，該會(huì)生成只包含initalRoute值的數(shù)組navigationBar node
該為可選的參數(shù)她倘，在頁(yè)面切換中用來(lái)提供一個(gè)導(dǎo)航欄navigator object
該為可選參數(shù)，可以從父類(lèi)導(dǎo)航器中獲取導(dǎo)航器對(duì)象sceneStyle 樣式風(fēng)格
該繼承了View視圖的所有樣式風(fēng)格作箍，用于設(shè)置每個(gè)頁(yè)面容器的風(fēng)格
1.2 常用的導(dǎo)航器方法
當(dāng)獲取了導(dǎo)航器對(duì)象的引用硬梁，我們可以進(jìn)行調(diào)用以下一些方法來(lái)實(shí)現(xiàn)頁(yè)面導(dǎo)航功能:
- getCurrentRoutes() 該進(jìn)行返回存在的路由列表信息
- jumpBack() 該進(jìn)行回退操作 但是該不會(huì)卸載(刪除)當(dāng)前的頁(yè)面
- jumpForward() 進(jìn)行跳轉(zhuǎn)到相當(dāng)于當(dāng)前頁(yè)面的下一個(gè)頁(yè)面
- jumpTo(route) 根據(jù)傳入的一個(gè)路由信息，跳轉(zhuǎn)到一個(gè)指定的頁(yè)面(該頁(yè)面不會(huì)卸載刪除)
- push(route) 導(dǎo)航切換到一個(gè)新的頁(yè)面中胞得，新的頁(yè)面進(jìn)行壓入棧荧止。通過(guò)jumpForward()方法可以回退過(guò)去
- pop() 當(dāng)前頁(yè)面彈出來(lái)，跳轉(zhuǎn)到棧中下一個(gè)頁(yè)面阶剑，并且卸載刪除掉當(dāng)前的頁(yè)面
- replace(route) 只用傳入的路由的指定頁(yè)面進(jìn)行替換掉當(dāng)前的頁(yè)面
- replaceAtIndex(route,index) 傳入路由以及位置索引跃巡，使用該路由指定的頁(yè)面跳轉(zhuǎn)到指定位置的頁(yè)面
- replacePrevious(route) 傳入路由，通過(guò)指定路由的頁(yè)面替換掉前一個(gè)頁(yè)面
- resetTo(route) 進(jìn)行導(dǎo)航到新的界面牧愁，并且重置整個(gè)路由棧
- immediatelyResetRouteStack(routeStack) 該通過(guò)一個(gè)路由頁(yè)面數(shù)組來(lái)進(jìn)行重置路由棧
- popToRoute(route) 進(jìn)行彈出相關(guān)頁(yè)面瓷炮，跳轉(zhuǎn)到指定路由的頁(yè)面，彈出來(lái)的頁(yè)面會(huì)被卸載刪除
- popToTop() 進(jìn)行彈出頁(yè)面递宅，導(dǎo)航到棧中的第一個(gè)頁(yè)面娘香，彈出來(lái)的所有頁(yè)面會(huì)被卸載刪除
1.3 默認(rèn)的寫(xiě)法
<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組件已經(jīng)移植到react-native-deprecated-custom-components中，所以要遵循以下引入方式：
import {Navigator} from 'react-native-deprecated-custom-components';
二烘绽、Navigator.IOS
NavigatorIOS包裝了UIKit的導(dǎo)航功能淋昭，可以使用左劃功能來(lái)返回到上一界面。
2.1 常用的導(dǎo)航器方法
push(route)
導(dǎo)航器跳轉(zhuǎn)到一個(gè)新的路由安接。pop()
回到上一頁(yè)翔忽。popN(n)
回到N頁(yè)之前。當(dāng)N=1的時(shí)候盏檐，效果和 pop() 一樣歇式。replace(route)
替換當(dāng)前頁(yè)的路由，并立即加載新路由的視圖胡野。replacePrevious(route)
替換上一頁(yè)的路由/視圖材失。replacePreviousAndPop(route)
替換上一頁(yè)的路由/視圖并且立刻切換回上一頁(yè)。resetTo(route)
替換最頂級(jí)的路由并且回到它硫豆。popToRoute(route)
一直回到某個(gè)指定的路由龙巨。popToTop()
回到最頂層的路由。
2.2 常用的屬性
barTintColor string
導(dǎo)航條的背景顏色熊响。initialRoute {
component: function, // 路由到對(duì)應(yīng)的版塊
title: string, // 標(biāo)題
passProps: object, // 傳遞的參數(shù)
backButtonIcon: Image.propTypes.source, // 返回按鈕
backButtonTitle: string, // 返回按鈕標(biāo)題
leftButtonIcon:Image.propTypes.source,
leftButtonTitle: string,
onLeftButtonPress: function,
rightButtonIcon: Image.propTypes.source,
rightButtonTitle: string,
onRightButtonPress: function,
wrapperStyle: [object Object]
}
NavigatorIOS使用"路由"對(duì)象來(lái)包含要渲染的子視圖旨别、它們的屬性、以及導(dǎo)航條配置汗茄。"push"和任何其它的導(dǎo)航函數(shù)的參數(shù)都是這樣的路由對(duì)象秸弛。
// 跳轉(zhuǎn)到新聞詳情頁(yè)面
_pushToNewsDetail(docid){
this.props.navigator.push({
component:NewsDetail, // 跳轉(zhuǎn)的頁(yè)面
passProps:{docid} // 跳轉(zhuǎn)時(shí)候攜帶的參數(shù)數(shù)據(jù)
})
}
}
itemWrapperStyle View#style
導(dǎo)航器中的組件的默認(rèn)屬性。一個(gè)常見(jiàn)的用途是設(shè)置所有頁(yè)面的背景顏色洪碳。navigationBarHidden bool
一個(gè)布爾值递览，決定導(dǎo)航欄是否隱藏。shadowHidden bool
一個(gè)布爾值偶宫，決定是否要隱藏1像素的陰影。tintColor string
導(dǎo)航欄上按鈕的顏色环鲤。titleTextColor string
導(dǎo)航器標(biāo)題的文字顏色纯趋。translucent bool
一個(gè)布爾值，決定是否導(dǎo)航條是半透明的冷离。-
運(yùn)行效果：
TabBar.gif 實(shí)例代碼：
export default class HJMain extends Component {
// 構(gòu)造初始化狀態(tài)
constructor(props) {
super(props);
this.state = {
selectedItem:'Home'
};
}
render() {
return (
<TabBarIOS
// 設(shè)置選中顏色
tintColor='orange'
>
{/*首頁(yè)*/}
<TabBarIOS.Item
icon={{uri:'tabbar_home',scale:3}}
title="首頁(yè)"
translucent={true} // 透明效果
// 被選中時(shí)的圖片
selectedIcon={{uri:'tabbar_home_highlighted',scale:3}}
selected={this.state.selectedItem == 'Home'}
onPress={()=>{this.setState({selectedItem:'Home'})}}
>
<NavigatorIOS
//導(dǎo)航欄半透明效果 非半透明View會(huì)自動(dòng)往下移
translucent={true}
style={{flex: 1}}
tintColor='orange'
initialRoute={{
component: Home, //設(shè)置根視圖
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}
// 被選中時(shí)的圖片
selectedIcon={{uri:'tabbar_message_center_highlighted',scale:3}}
selected={this.state.selectedItem == 'Message'}
onPress={()=>{this.setState({selectedItem:'Message'})}}
>
<NavigatorIOS
//導(dǎo)航欄半透明效果 非半透明View會(huì)自動(dòng)往下移
translucent={true}
style={{flex:1}}
titleColor="white"
initialRoute={{
component:Message,
title:'信息',
}}
/>
</TabBarIOS.Item>
{/*發(fā)現(xiàn)*/}
<TabBarIOS.Item
icon={{uri:'tabbar_discover',scale:3}}
title='發(fā)現(xiàn)'
translucent={true}
// 被選中時(shí)的圖片
selectedIcon={{uri:'tabbar_discover_highlighted',scale:3}}
selected={this.state.selectedItem == 'Discover'}
onPress={()=>{this.setState({selectedItem:'Discover'})}}
>
<NavigatorIOS
//導(dǎo)航欄半透明效果 非半透明View會(huì)自動(dòng)往下移
translucent={true}
style={{flex:1}}
initialRoute={{
component:Find,
title:'發(fā)現(xiàn)',
}}
/>
</TabBarIOS.Item>
{/*我的*/}
<TabBarIOS.Item
icon={{uri:'tabbar_profile',scale:3}}
title='我'
//半透明
translucent={true}
// 被選中時(shí)的圖片
selectedIcon={{uri:'tabbar_profile_highlighted',scale:3}}
selected={this.state.selectedItem == 'Me'}
onPress={()=>this.setState({selectedItem:'Me'})}
>
<NavigatorIOS
//導(dǎo)航欄半透明效果 非半透明View會(huì)自動(dòng)往下移
translucent={true}
style={{flex:1}}
// 導(dǎo)航欄顏色
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;
