TabNavigator是github上開源的一個rn元件，是適用於ios和安卓兩個平臺的底部導航欄。

元件地址：https://github.com/expo/react-native-tab-navigator

1.首先通過命令列將元件引入專案：

進入專案根目錄並執行

npm install react-native-tab-navigator --save

"dependencies": {
    "react": "15.3.2",
    "react-native": "0.37.0",
    "react-native-tab-navigator": "^0.3.3"
  },
 

然後在js檔案中引入：

import TabNavigator from 'react-native-tab-navigator';

2.使用方法：

先看程式碼：

<TabNavigator
                    tabBarStyle={{height:60}}
                    style={{flex:1}}>
                    <TabNavigator.Item
                        title="home"
                        selected={this.state.tab=='home'}
                        onPress={()=>this.setState({tab:'home'})}
                        badgeText="122"
                        renderIcon={()=><Image
                            style={{width:40,height:33}}
                            source={require('./img/chat.png')}></Image>}
                        >
                        {home}
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        title="second"
                        selected={this.state.tab=='second'}
                        onPress={()=>this.setState({tab:'second'})}
                        renderIcon={()=><Image
                            style={{width:40,height:33}}
                            source={require('./img/contact.png')}></Image>}
                        >
                        {second}
                    </TabNavigator.Item>
                </TabNavigator>
 

重點是Item的幾個屬性,

title就是圖示底部顯示的文字，字型顏色等不必指定，預設效果較好

renderIcon就是顯示的圖示，接收一個函式，返回一個View,這裡直接返回圖片，注意寬高要指定，不會自動縮放，

還有renderSelectedIcon用來作為選中時顯示的圖示，但是預設使用上面的屬性選中時高亮，效果較好，也就用不到這個屬性了

onPress不用說，我這裡用來為state賦值，從而將點選事件和selected屬性聯絡起來

selected自然就是指定是否選中，這裡通過返回state的比較結果確定

badgeText是圖示右上角顯示的badge文字內容，也可以通過renderBadge接收一個函式，返回自定義的Badge檢視

還有要注意的是底部導航欄的高度是自適應圖示和文字的，不包含badge，所以badge內容無法完全顯示。可以設定navigator的屬性tabBarStyle來指定導航欄的高度。