要做的效果很簡單，如下圖所示：
效果圖
使用基本教程
1.引入組件
import TabNavigator from 'react-native-tab-navigator';
2.render方法中返回：
render() {
return (
<View style={styles.container} >
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === '電影'}
title="電影"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../images/movie_gray.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/movie_red.png")} />}
onPress={() => this.setState({ selectedTab: '電影' })}>
<MoviePage/> // 這里放入頁面組件
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '音樂'}
title="音樂"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../images/music_gray.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/music_red.png")} />}
onPress={() => this.setState({ selectedTab: '音樂' })}>
<MusicPage />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '圖書'}
title="圖書"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../images/book_gray.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/book_red.png")} />}
onPress={() => this.setState({ selectedTab: '圖書' })}>
<BookPage />
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === '我的'}
title="我的"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("../images/my_gray.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/my_red.png")} />}
onPress={() => this.setState({ selectedTab: '我的' })}>
<MyPage />
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
引入頁面組件：
import MoviePage from './pages/MoviePage';
import MusicPage from './pages/MusicPage';
import BookPage from './pages/BookPage';
import MyPage from './pages/MyPage';
設置state狀態機：
constructor(props){
super(props);
this.state = {
selectedTab:'電影'
}
}
引入基本樣式：
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#fff'
},
tabText:{
color:'#000000',
fontSize:10
},
selectedTabText:{
color:'#D81E06'
},
icon:{
width:20,
height:20
}
})
這個時候效果已經出來了，我們繼續抽象組件：
將每一個欄目抽出來放到一個統一的方法中：
_renderTabarItems(selectedTab,icon,selectedIcon,Component){
return (
<TabNavigator.Item
selected={this.state.selectedTab === selectedTab}
title={selectedTab}
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={icon} />}
renderSelectedIcon={() => <Image style={styles.icon} source={selectedIcon} />}
onPress={() => this.setState({ selectedTab: selectedTab })}
>
<Component />
</TabNavigator.Item>
)
}
此時，render方法中就直接引用四個方法即可：
render() {
return (
<View style={styles.container}>
<TabNavigator>
{this._renderTabarItems('電影',require('../img/movie_gray.png'),require('../img/movie_red.png'),MoviePage)}
{this._renderTabarItems('音樂',require('../img/music_gray.png'),require('../img/music_red.png'),MusicPage)}
{this._renderTabarItems('圖書',require('../img/book_gray.png'),require('../img/book_red.png'),BookPage)}
{this._renderTabarItems('我的',require('../img/my_gray.png'),require('../img/my_red.png'),MyPage)}
</TabNavigator>
</View>
);
}
至此，已經初步完成。
組件的屬性集合：
Props
TabNavigator props
| prop | default | type | description |
|---|---|---|---|
| sceneStyle | inherited | object (style) | 場景樣式，即Tab頁容器的樣式，可按View的style設置 |
| tabBarStyle | inherited | object (style) | TabBar的樣式，基本也可按照普通的style寫法進行設置 |
| tabBarShadowStyle | inherited | object (style) | TabBar陰影的樣式，不過對于扁平化的設計，這個屬性應該用處不大 |
| hidesTabTouch | false | boolean | bool類型，即是否隱藏Tab按鈕的按下效果 |
TabNavigator.Item props
| prop | default | type | description |
|---|---|---|---|
| renderIcon | none | function | 即圖標，但為function類型，所以這里需要用到Arrow Function |
| renderSelectedIcon | none | function | 選中狀態的圖標，非必填，也是function類型 |
| badgeText | none | string or number | 即Tab右上角的提示文字，可為String或Number，類似QQ中Tab右上角的消息提示，非必填 |
| renderBadge | none | function | 提示角標渲染方式，function類型，類似render的使用，非必填 |
| title | none | string | 標題，String類型，非必填 |
| titleStyle | inherited | style | 標題樣式，style類型，非必填 |
| selectedTitleStyle | none | style | 選中標題樣式，style類型，非必填 |
| tabStyle | inherited | style | styling for tab |
| selected | none | boolean | bool型，是否選中狀態，可使用setState進行控制，默認false |
| onPress | none | function | 即點擊事件的回調函數，這里需要控制的是state |
| allowFontScaling | false | boolean | bool型，是否允許字體縮放，默認false |
