前言
這十篇學(xué)完以后你已經(jīng)了解了RN開發(fā)的基本模式和基本模塊，后面我們再寫一個(gè)小項(xiàng)目，就結(jié)束本階段的RN學(xué)習(xí)。本篇的內(nèi)容如下：
- TabNavigator
- Navigator
一、TabNavigator
TabNavigator就是我們QQ上下面的用來切換頁面的一排按鈕，RN里有一個(gè)TabBarIOS組件，專門用來做iOS的開發(fā)的，android的目前還沒有，我們需要解決第三方的模塊來實(shí)現(xiàn)這個(gè)功能
-
在項(xiàng)目中安裝TabNavigator模塊
將命令行定位到當(dāng)前項(xiàng)目的路徑
-
安裝
npm install react-native-tab-navigator --save -
引入組件
//引入tabbar支持包 import TabNavigator from 'react-native-tab-navigator'; -
相應(yīng)組件的意義
<TabNavigator>組件指的就是下面那個(gè)橫條 TabNavigator.Item是每一個(gè)橫條中的每一個(gè)選項(xiàng) <TabNavigtor.Item></TabNavigator.Item>中間放一個(gè)View做為這個(gè)選項(xiàng)卡對應(yīng)的組件
-
基本使用
//tabBarStyle設(shè)置下面橫條的樣式 <TabNavigator tabBarStyle={{style}}> <TabNavigator.Item //指定的函數(shù)返回一個(gè)icon作為未選中時(shí)的icon renderIcon: PropTypes.func //指定的函數(shù)返回一個(gè)icon作為選中時(shí)的icon renderSelectedIcon: PropTypes.func //角標(biāo)數(shù)字 badgeText: string //角標(biāo)的icon renderBadge: PropTypes.func //標(biāo)題 title: PropTypes.string //默認(rèn)標(biāo)題的樣式 titleStyle: Text.propTypes.style //選中標(biāo)題的樣式 selectedTitleStyle: Text.propTypes.style //tab的樣式 tabStyle: View.propTypes.style //當(dāng)前選項(xiàng)卡是否被選中 selected: PropTypes.bool //點(diǎn)擊事件 onPress: PropTypes.func > {homeView} </TabNavigator.Item> </TabNavigator> -
源碼示例
二、Navigator
很多時(shí)候，我們需要導(dǎo)航器來應(yīng)對不同場景間的切換，它通過路由對象來分辨不同的場景，我們這里采用的是renderScene方法，根據(jù)指定的路由來渲染
-
常用的屬性
1. initialRoute Object 初始化路由
對象格式
{
id:"main"
}這個(gè)對象主要作為路由的參數(shù)
2. renderScene function 根據(jù)每個(gè)頁面的路由信息返回一個(gè)頁面并渲染
-
函數(shù)格式
(route,navigator)=><MySceneComponent title={route.title} navigator={navigator}> route: 路由 navigator: 導(dǎo)航器，幫助我們做頁面切換 <MySceneComponent> 頁面 只要涉及到頁面切換都會調(diào)用這個(gè)方法，包括首頁。比如，當(dāng)首頁加載時(shí)route對象就是initialRoute指定的對象
3. configureScene function 配置場景動畫
()=>{ return Navigator.SceneConfigs .HorizontalSwipeJump; } 可以看這個(gè)目錄:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳轉(zhuǎn)的時(shí)候的方向) -
導(dǎo)航器常用的方法
-
getCurrentRoutes()
返回當(dāng)前路由的列表信息 -
push(route)
導(dǎo)航切換到一個(gè)新的頁面中，新的頁面進(jìn)行壓入棧。通過jumpForward()方法可以回退過去 -
pop()
當(dāng)前頁面彈出來，跳轉(zhuǎn)到棧中下一個(gè)頁面，并且卸載刪除掉當(dāng)前的頁面 -
replace(route)
只用傳入的路由的指定頁面進(jìn)行替換掉當(dāng)前的頁面 -
popToTop()
進(jìn)行彈出頁面，導(dǎo)航到棧中的第一個(gè)頁面，彈出來的所有頁面會被卸載刪除 -
其他方法
5) jumpBack() 該進(jìn)行回退操作 但是該不會卸載(刪除)當(dāng)前的頁面 6) jumpForward() 進(jìn)行跳轉(zhuǎn)到相當(dāng)于當(dāng)前頁面的下一個(gè)頁面 7) jumpTo(route) 根據(jù)傳入的一個(gè)路由信息，跳轉(zhuǎn)到一個(gè)指定的頁面(該頁面不會卸載刪除) 8) replaceAtIndex(route,index) 傳入路由以及位置索引，使用該路由指定的頁面跳轉(zhuǎn)到指定位置的頁面 9) replacePrevious(route) 傳入路由，通過指定路由的頁面替換掉前一個(gè)頁面 10) resetTo(route) 進(jìn)行導(dǎo)航到新的界面，并且重置整個(gè)路由棧 11) immediatelyResetRouteStack(routeStack) 該通過一個(gè)路由頁面數(shù)組來進(jìn)行重置路由棧 12)popToRoute(route) 進(jìn)行彈出相關(guān)頁面，跳轉(zhuǎn)到指定路由的頁面，彈出來的頁面會被卸載刪除
-
-
源碼示例
