官方為我們提供的Tab控制器有兩種：

TabBarIOS，僅適用于IOS平臺

ViewPagerAndroid，僅適用于Android平臺(嚴格來講并不算，因為我們還需要自己實現Tab)

如果我們需要一個更通用的Tab控制器，那么就要借助開源的力量，本篇文章教你如何使用

react-native-scrollable-tab-view，這是官方Demo的效果

demo.gif

demo-fb.gif

一、準備工作

新建一個項目

react-native init Demo6

添加react-native-scrollable-tab-view

npm install react-native-scrollable-tab-view --save

二、Props介紹

renderTabBar(Function:ReactComponent)

TabBar的樣式，系統提供了兩種默認的，分別是DefaultTabBar和ScrollableTabBar。當然，我們也可以自定義一個，我們會在下篇文章重點講解如何去自定義TabBar樣式。

render() {

return (

renderTabBar={() => }>

);

}

注意：每個被包含的子視圖需要使用tabLabel屬性，表示對應Tab顯示的文字

DefaultTabBar：Tab會平分在水平方向的空間

default.png

ScrollableTabBar：Tab可以超過屏幕范圍，滾動可以顯示

scrollable.png

tabBarPosition(String，默認值'top')

render() {

return (

tabBarPosition='top'

renderTabBar={() => }>

...

);

}

top：位于屏幕頂部

default.png

bottom：位于屏幕底部

bottom.png

overlayTop：位于屏幕頂部，懸浮在內容視圖之上(看顏色區分：視圖有顏色，Tab欄沒有顏色)

overlayTop.png

overlayBottom：位于屏幕底部，懸浮在內容視圖之上(看顏色區分：視圖有顏色，Tab欄沒有顏色)

overlayBottom.png

onChangeTab(Function)

Tab切換之后會觸發此方法，包含一個參數(Object類型)，這個對象有兩個參數

i：被選中的Tab的下標(從0開始)

ref：被選中的Tab對象(基本用不到)

render() {

return (

renderTabBar={() => }

onChangeTab={(obj) => {

console.log('index:' + obj.i);

}

}>

...

);

}

onScroll(Function)

視圖正在滑動的時候觸發此方法，包含一個Float類型的數字，范圍是[0, tab數量-1]

render() {

return (

renderTabBar={() => }

onScroll={(postion) => {

// float類型 [0, tab數量-1]

console.log('scroll position:' + postion);

}

}>

...

);

}

locked(Bool，默認為false)

表示手指是否能拖動視圖，默認為false(表示可以拖動)。設為true的話，我們只能“點擊”Tab來切換視圖。

render() {

return (

locked={false}

renderTabBar={() => }>

...

);

}

initialPage(Integer)

初始化時被選中的Tab下標，默認是0(即第一頁)

render() {

return (

initialPage={1}

renderTabBar={() => }>

...

);

}

2016.12.12更新：react-native-scrollable-tab-view最新版本0.7.0，此屬性在Android平臺無效，具體表現為頁面不會被“渲染”，但是iOS平臺是沒問題的。建議大家暫時使用0.6.0，作者表示已經準備修復此問題，詳見：https://github.com/skv-headless/react-native-scrollable-tab-view/issues/483

page(Integer)

設置選中指定的Tab(然而測試下來并沒有任何效果，知道原因的同學麻煩留言下 ~)

寫于2016.06.29：跟作者溝通下來下個版本打算廢棄這個屬性，原話為‘It is a legacy I would like to remove it but someone might use it. Probably in next version I'll remove it.’參考issue#320

children(ReactComponents)

表示所有子視圖的數組，比如下面的代碼，children則是一個長度為6的數組，元素類型為Text

render() {

return (

renderTabBar={() => }>

);

}

tabBarUnderlineStyle(style)

設置DefaultTabBar和ScrollableTabBarTab選中時下方橫線的顏色

tabBarBackgroundColor(String)

設置整個Tab這一欄的背景顏色

tabBarActiveTextColor(String)

設置選中Tab的文字顏色

tabBarInactiveTextColor(String)

設置未選中Tab的文字顏色

tabBarTextStyle(Object)

設置Tab文字的樣式，比如字號、字體等

上面這5個樣式示例如下：

render() {

return (

renderTabBar={() => }

tabBarUnderlineStyle={{backgroundColor:'#FF0000'}}

tabBarBackgroundColor='#FFFFFF'

tabBarActiveTextColor='#9B30FF'

tabBarInactiveTextColor='#7A67EE'

tabBarTextStyle={{fontSize: 18}}

>

...

);

}

top5.png

style

contentProps(Object)

這里要稍微說下react-native-scrollable-tab-view的實現，其實在Android平臺底層用的是ViewPagerAndroid，iOS平臺用的是ScrollView。這個屬性的意義是：比如我們設置了某個屬性，最后這個屬性會被應用在ScrollView/ViewPagerAndroid，這樣會覆蓋庫里面默認的，通常官方不建議我們去使用。

scrollWithoutAnimation(Bool，默認為false)

設置“點擊”Tab時，視圖切換是否有動畫，默認為false(即：有動畫效果)。

render() {

return (

scrollWithoutAnimation={true}

renderTabBar={() => }>

...

);

}

注意：這個屬性的設置對滑動視圖切換的動畫效果沒有影響，僅僅對“點擊”Tab效果有作用。看下下面動態圖的對比(今天錄得動態圖不知道為啥抽瘋了，調了好幾遍都不行，湊合看吧~)

click.gif

slide.gif

總結

以上是生活随笔為你收集整理的react滑动切换tab动画效果_[React Native]react-native-scrollable-tab-view(入门篇)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。