react-native-tab-navigator組件的基本使用示例代碼

更新時間：2017年09月07日 14:23:37 作者：隨遇而安_2750

本篇文章主要介紹了react-native-tab-navigator組件的基本使用示例代碼，具有一定的參考價值，有興趣的可以了解一下

要做的效果很簡單，如下圖所示：

使用基本教程

1.引入組件

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

Github上的地址

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';

設(shè)置state狀態(tài)機(jī)：

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
 }
})

這個時候效果已經(jīng)出來了，我們繼續(xù)抽象組件：

將每一個欄目抽出來放到一個統(tǒng)一的方法中：

_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>
 );
 }

至此，已經(jīng)初步完成。

組件的屬性集合：

Props

TabNavigator props

prop	default	type	description
sceneStyle	inherited	object (style)	場景樣式，即Tab頁容器的樣式，可按View的style設(shè)置
tabBarStyle	inherited	object (style)	TabBar的樣式，基本也可按照普通的style寫法進(jìn)行設(shè)置
tabBarShadowStyle	inherited	object (style)	TabBar陰影的樣式，不過對于扁平化的設(shè)計，這個屬性應(yīng)該用處不大
hidesTabTouch	false	boolean	bool類型，即是否隱藏Tab按鈕的按下效果

TabNavigator.Item props

prop	default	type	description
renderIcon	none	function	即圖標(biāo)，但為function類型，所以這里需要用到Arrow Function
renderSelectedIcon	none	function	選中狀態(tài)的圖標(biāo)，非必填，也是function類型
badgeText	none	string or number	即Tab右上角的提示文字，可為String或Number，類似QQ中Tab右上角的消息提示，非必填
renderBadge	none	function	提示角標(biāo)渲染方式，function類型，類似render的使用，非必填
title	none	string	標(biāo)題，String類型，非必填
titleStyle	inherited	style	標(biāo)題樣式，style類型，非必填
selectedTitleStyle	none	style	選中標(biāo)題樣式，style類型，非必填
tabStyle	inherited	style	styling for tab
selected	none	boolean	bool型，是否選中狀態(tài)，可使用setState進(jìn)行控制，默認(rèn)false
onPress	none	function	即點擊事件的回調(diào)函數(shù)，這里需要控制的是state
allowFontScaling	false	boolean	bool型，是否允許字體縮放，默認(rèn)false