React Native常用組件之TabBarIOS、TabBarIOS.Item組件、Navigator組件、NavigatorIOS組件
TabBarIOS部分
在目前市面上的APP中，大部分都是選項與選項之間的切換，比如：微信、微博、QQ空間......, 在iOS中，我們可以通過TabItem類進行實現。那麽，在React Native中，我們應該怎麽實現呢？
在React Native中可以通過TabBarIOS和TabBarIOS.Item組件來實現選項卡切換效果，大家可以看到後面帶有IOS，所以這個組件是不支持Android的，當然後面我們可以自定義該組件。
一、TabBarIOS常見的屬性
View的所有屬性都可以被繼承
barTintColor color 設置tab條的背景顏色
tintColor
color 設置tab條上被選中圖標的顏色
translucent bool 設置Tab欄是不是半透明的效果
二、TabBarIOS.Item常見的屬性
badge number
在圖標的右上方顯示小紅色氣泡，顯示信息
icon Image.propTypes.source
Tab按鈕自定義的圖標，如果systemicon屬性被定義了，那麽該屬性會被忽略
onPress function
當Tab按鈕被選中的時候進行回調，你可以設置selected={true}來設置組件被選中
selected bool
該屬性標誌子頁面是否可見，如果是一個空白的內容頁面，那麽一定是忘記了選中任何的一個頁面標簽Tab
selectedIcon Image.propTypes.source
設置當Tab按鈕被選中的時候顯示的自定義圖標，如果systemIcon屬性被設置了，那麽該屬性會被忽略。如果定義了icon屬性，但是當前的selectedIcon屬性沒有設置，那麽該圖標會被設置成藍色
style 設置樣式風格，繼承View的樣式各種風格
systemIcon
enum(‘bookmarks‘,‘contacts‘,‘downloads‘,‘favorites‘,‘featured‘,‘history‘,‘more‘,‘most-recent‘,‘most-viewed‘,‘recents‘,‘search‘,‘top-rated‘)
系統預定義的圖標，如果你使用這些圖標，那麽你上面設置的標題，選中的圖標都會被這些系統圖標所覆蓋。
title string
在Tab按鈕圖標下面顯示的標題信息，如果你設置了SystemIcon屬性，那麽該屬性會被忽略
三、TabBarIOS.Item案例展示
代碼展示：
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from ‘react‘; import { AppRegistry, StyleSheet, Text, View, Image, TabBarIOS } from ‘react-native‘; var Car = require(‘./Car.json‘); export default class FListViewDemo1 extends Component{ constructor(props){ super(props); this.state = { selectedTabBarItem:‘home‘ }; } render(){ return( <View style={styles.container}> <View style={styles.headerViewStyle}> <Text style={{color:‘white‘}}>Tab選項卡切換</Text> </View> <TabBarIOS barTintColor=‘white‘> <TabBarIOS.Item systemIcon="contacts" badge="3" // title="張三" selected={this.state.selectedTabBarItem == ‘home‘} onPress ={()=>{this.setState({selectedTabBarItem:‘home‘})}} > <View style={[styles.commentViewStyle,{backgroundColor:‘red‘}]}> <Text>首頁</Text> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="bookmarks" // title="李四" selected={this.state.selectedTabBarItem == ‘second‘} onPress ={()=>{this.setState({selectedTabBarItem:‘second‘})}} > <View style={[styles.commentViewStyle,{backgroundColor:‘green‘}]}> <Text>第二頁</Text> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="contacts" // title="王二" selected={this.state.selectedTabBarItem == ‘third‘} onPress ={()=>{this.setState({selectedTabBarItem:‘third‘})}} > <View style={[styles.commentViewStyle,{backgroundColor:‘blue‘}]}> <Text>第三頁</Text> </View> </TabBarIOS.Item> <TabBarIOS.Item systemIcon="contacts" // title ="麻子" selected={this.state.selectedTabBarItem == ‘four‘} onPress ={()=>{this.setState({selectedTabBarItem:‘four‘})}} > <View style={[styles.commentViewStyle,{backgroundColor:‘purple‘}]}> <Text>第四頁</Text> </View> </TabBarIOS.Item> </TabBarIOS> </View> ); } } const styles = StyleSheet.create({ headerViewStyle:{ height:64, backgroundColor:‘black‘, justifyContent:‘center‘, alignItems:‘center‘ }, commentViewStyle:{ flex:1, alignItems:‘center‘, justifyContent:‘center‘ }, container:{ flex:1, backgroundColor:‘#f5fcff‘ } });
提示：在TabBarIOS.Item中，如果設置了systemIcon，再去設置title將不會起作用。
Navigator部分
在開發中，我們需要實現多個界面的切換，這時候就需要一個導航控制器來進行各種效果的切換。那麽，在React Native中有兩個組件能夠實現這樣的效果：Navigator和NavigatorIOS。
其中Navigator是適配Android和iOS，而NavigatorIOS則是包裝了UIKit的導航功能，可以使用左劃功能來返回到上一界面。
一、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} /> }} />
二、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"和任何其它的導航函數的參數都是這樣的路由對象。
比如：下面新聞列表跳轉到新聞詳情頁詳情頁：
itemWrapperStyle View#style
導航器中的組件的默認屬性。一個常見的用途是設置所有頁面的背景顏色。
navigationBarHidden bool
一個布爾值，決定導航欄是否隱藏。
shadowHidden bool
一個布爾值，決定是否要隱藏1像素的陰影。
tintColor string
導航欄上按鈕的顏色。
titleTextColor string
導航器標題的文字顏色。
translucent bool
一個布爾值，決定是否導航條是半透明的。
三、綜合小案例
3.1 部分核心代碼
React Native常用組件之TabBarIOS、TabBarIOS.Item組件、Navigator組件、NavigatorIOS組件