小編給大家分享一下react-native-tab-navigator組件怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
我們提供的服務(wù)有：網(wǎng)站建設(shè)、網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、鳳縣ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的鳳縣網(wǎng)站制作公司
要做的效果很簡(jiǎn)單，如下圖所示：
使用基本教程
1.引入組件
import TabNavigator from 'react-native-tab-navigator';
Github上的地址
2.render方法中返回：
重慶分公司
重慶分公司
render() {
return (
);
} 引入頁面組件：
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
}
})這個(gè)時(shí)候效果已經(jīng)出來了，我們繼續(xù)抽象組件：
將每一個(gè)欄目抽出來放到一個(gè)統(tǒng)一的方法中：
_renderTabarItems(selectedTab,icon,selectedIcon,Component){
return (
)
}此時(shí)，render方法中就直接引用四個(gè)方法即可：
render() {
return (
{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)}
);
} 至此，已經(jīng)初步完成。
組件的屬性集合：
Props
TabNavigator props
| prop | default | type | description |
|---|---|---|---|
| sceneStyle | inherited | object (style) | 場(chǎng)景樣式，即Tab頁容器的樣式，可按View的style設(shè)置 |
| tabBarStyle | inherited | object (style) | TabBar的樣式，基本也可按照普通的style寫法進(jìn)行設(shè)置 |
| tabBarShadowStyle | inherited | object (style) | TabBar陰影的樣式，不過對(duì)于扁平化的設(shè)計(jì)，這個(gè)屬性應(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ǎn)擊事件的回調(diào)函數(shù)，這里需要控制的是state |
| allowFontScaling | false | boolean | bool型，是否允許字體縮放，默認(rèn)false |
以上是“react-native-tab-navigator組件怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
