TabBar切換頁的實現——React-native-tab-navigator的使用
乾貨直接上程式碼
一：專案整合React-native-tab-navigator
在當前專案下 終端執行：npm install react-native-tab-navigator –save下載
顯示 @xx.xx.x 版本號且 在 專案的根目錄的 \node_modules下面出現這個檔案react-native-tab-navigator 後就說明下載整合成功
二：引入react-native-tab-navigator
import TabNavigator from 'react-native-tab-navigator';
import React, { Component } from 'react'; import TabNavigator from 'react-native-tab-navigator'; import { AppRegistry, Text, View, Navigator, StyleSheet, Image, TouchableHighlight } from 'react-native'; import HomeComponent from './HomeComponent'; import CustomerComponent from './CustomerComponent'; import OrderComponent from './OrderComponent'; import ProductComponent from './ProductComponent'; import MineComponent from './MineComponent'; export default class Main extends Component { constructor(props) { super(props); this.state = { selectedTab:'home' }; } render() { return ( <View style={styles.container} > <TabNavigator tabBarStyle={styles.tab}> <TabNavigator.Item selected={this.state.selectedTab === '首頁'} title="首頁" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image source={require('./img/ic_home_normal.png')} style={styles.icon}/> } renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_home_checked.png')} />} onPress={() => this.setState({ selectedTab: '首頁' })}> <HomeComponent/> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '訂單'} title="訂單" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image source={require('./img/ic_order_normal.png')} style={styles.icon}/> } renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_order_checked.png')} />} onPress={() => this.setState({ selectedTab: '訂單' })}> <OrderComponent /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '客戶'} title="客戶" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image source={require('./img/ic_customer_normal.png')} style={styles.icon}/> } renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_customer_checked.png')} />} onPress={() => this.setState({ selectedTab: '客戶' })}> <CustomerComponent /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '產品'} title="產品" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image source={require('./img/ic_product_normal.png')} style={styles.icon}/> } renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_product_checked.png')} />} onPress={() => this.setState({ selectedTab: '產品' })}> <ProductComponent /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '我的'} title="我的" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image source={require('./img/ic_mine_normal.png')} style={styles.icon}/> } renderSelectedIcon={() => <Image style={styles.icon} source={require('./img/ic_mine_checked.png')} />} onPress={() => this.setState({ selectedTab: '我的' })}> <MineComponent /> </TabNavigator.Item> </TabNavigator> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1 }, tab: { height: 70, backgroundColor: '#222222', alignItems: 'center' }, tabText: { marginTop: 1, color: '#ffffff', fontSize: 16 }, selectedTabText: { marginTop: 1, color: '#FFD700', fontSize: 16 }, icon: { width: 30, height: 31, resizeMode: 'stretch', marginTop: 10 } });
2.TabNavigator的樣式設定
上面的程式碼當中，TabNavigator繼承於View類，除了包括style的一些屬性可以和View控制元件一樣設定外，它還具有其他一些獨特的屬性，用於控制樣式sceneStyle：場景樣式，即Tab頁容器的樣式，可按View的style設定
tabBarStyle：TabBar的樣式，基本也可按照普通的style寫法進行設定
tabBarShadowStyle：TabBar陰影的樣式，不過對於扁平化的設計，這個屬性應該用處不大
hidesTabTouch：bool型別，即是否隱藏Tab按鈕的按下效果
根據我們上面對TabBar樣式的分析，我們可以按照如下樣式，為TabNavigator指定tabBarStyle
根據主題設定背景顏色為黑色
const styles = StyleSheet.create({
tab: {
height: 70,
backgroundColor: '#222222',
alignItems: 'center'
}
}
3.Item的構建
TabNavigator的Item就是我們所看到的5個Tab按鈕以及它們所對應的頁面，這些頁面在Android中可能以Fragment呈現，在iOS中可能以UIView呈現，而在React Native中，則是一個<View>，我們可以自己義，也可以直接放置其他控制元件。
這些Item在TabNavigator中，以<TabNavigator.Item>形式呈現，其可設定的相關屬性如下：
renderIcon: 必填項，即圖示，但為function型別，所以這裡需要用到Arrow Function
renderSelectedIcon: 選中狀態的圖示，非必填，也是function型別
badgeText: 即Tab右上角的提示文字，可為String或Number，類似QQ中Tab右上角的訊息提示，非必填
renderBadge: 提示角標渲染方式，function型別，類似render的使用，非必填
title: 標題，String型別，非必填
titleStyle: 標題樣式，style型別，非必填
selectedTitleStyle: 選中標題樣式，style型別，非必填
selected: bool型，是否選中狀態，可使用setState進行控制，預設false
onPress: function型，即點選事件的回撥函式，這裡需要控制的是state，而切換頁面已經由控制元件本身幫我們實現好了
allowFontScaling: bool型，是否允許字型縮放，預設false
而對於我們所關心的頁面切換，在TabNavigator.Item中，可將其置於<TabNavigator.Item>{<View/>}</TabNavigator.Item>之中，即作為Item的子元素存在，這裡請注意：如果添加了一個Item，必須為其新增一個View，否則將無法執行！
這裡提醒大家：
如果使用本地圖片，即在<Image>中，source屬性內使用require的形式引用圖片，由於js本身的性質，不可以使用動態的require，而應該直接require後的圖片資源當做引數傳遞！而使用uri形式獲取線上資源不受影響
在上面的程式碼中，由於TabBar控制元件的問題，我們可以在tabIcon樣式中，控制Icon的上邊距，以達到居中的效果，程式碼如下：
icon: {width: 30,
height: 31,
resizeMode: 'stretch',
marginTop: 10
}
這裡說明：
1.特別注意：由於在onPress函式中呼叫了this.setState，所以必須在類的使用建構函式，並對state進行初始化：
constructor(props) {
super(props);
this.state = {
selectedTab:'home'
};
}
效果圖：
