溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

react-native-tab-navigator組件怎么用

發布時間:2021-07-21 09:32:54 來源:億速云 閱讀:194 作者:小新 欄目:web開發

小編給大家分享一下react-native-tab-navigator組件怎么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

要做的效果很簡單,如下圖所示:

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

設置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

propdefaulttypedescription
sceneStyleinheritedobject (style)場景樣式,即Tab頁容器的樣式,可按View的style設置
tabBarStyleinheritedobject (style)TabBar的樣式,基本也可按照普通的style寫法進行設置
tabBarShadowStyleinheritedobject (style)TabBar陰影的樣式,不過對于扁平化的設計,這個屬性應該用處不大
hidesTabTouchfalsebooleanbool類型,即是否隱藏Tab按鈕的按下效果

TabNavigator.Item props

propdefaulttypedescription
renderIconnonefunction即圖標,但為function類型,所以這里需要用到Arrow Function
renderSelectedIconnonefunction選中狀態的圖標,非必填,也是function類型
badgeTextnonestring or number即Tab右上角的提示文字,可為String或Number,類似QQ中Tab右上角的消息提示,非必填
renderBadgenonefunction提示角標渲染方式,function類型,類似render的使用,非必填
titlenonestring標題,String類型,非必填
titleStyleinheritedstyle標題樣式,style類型,非必填
selectedTitleStylenonestyle選中標題樣式,style類型,非必填
tabStyleinheritedstylestyling for tab
selectednonebooleanbool型,是否選中狀態,可使用setState進行控制,默認false
onPressnonefunction即點擊事件的回調函數,這里需要控制的是state
allowFontScalingfalsebooleanbool型,是否允許字體縮放,默認false

以上是“react-native-tab-navigator組件怎么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女