在APP中免不了要使用tab元件,有的是tab切換,也有的是tab分類切換.這篇文章主要介紹了react-native動態切換tab元件的方法，非常具有實用價值，需要的朋友可以參考下

在APP中免不了要使用tab元件,有的是tab切換,也有的是tab分類切換.

這些元件分成下面兩種.

第一種非常簡單,同時大多數第三方元件都能達到效果.這裡重點講述第二種,我們要讓第二種元件不僅能左右滑動,同時還能夠在點選的時候自動滑動,將點選的位置滑動到正中間.

準備

我們先來分析一波.一個滑動元件在APP上是一種什麼狀態.

這裡可以看出,tab元件需要考慮到長度超過APP的螢幕,並且在超過之後能夠滑動.

同時計算出當前位置需要滑動多少距離才能夠將位置居中.
需要滑動的位置=點選位置的左邊距-APP螢幕/2+點選位置的寬度/2

這個公式也就是我們自動滑動的核心了.

開發

使用ScrollView元件承載tab項,這樣就可以非常簡單的達到滑動的效果.同時新增horizontal、directionalLockEnabled、showsHorizontalScrollIndicator、snapToAlignment幾個屬性.

<ScrollView ref={e => this.scroll = e}
 horizontal directionalLockEnabled
 showsHorizontalScrollIndicator={false}
 snapToAlignment="center">
 {this.props.data.map((item, index) =>
  {/*具體項*/}
 )}//歡迎加入全棧開發交流圈一起學習交流：864305860
</ScrollView>
 

使用TouchableOpacity包裹內容項,同時呼叫setLaout方法將每個項的寬高等屬性記錄下來,為我們後面計算當前位置做準備.

<TouchableOpacity onPress={() => this.setIndex(index)} 
 onLayout={e => this.setLaout(e.nativeEvent.layout, index)} 
 key={item.id} 
 style={tabBarStyle.itemBtn}>
  <Text style={[tabBarStyle.item, this.state.index === index ? tabBarStyle.active : null]} > {item.name}</Text>
  <View style={[tabBarStyle.line, this.state.index === index ? tabBarStyle.active2 : null]}>    </View>
</TouchableOpacity>
 

記錄每個項渲染之後的位置,將這些值存在變數裡,為後面計算做準備.

laout_list = []
setLaout(layout, index) {
 //存單個項的位置
 this.laout_list[index] = layout;
 //計算所有項的總長度
 this.scrollW += layout.width;
}

接下來就是點選自動變換位置的計算了.

setIndex(index, bl = true) {
 //先改變點選項的顏色
 this.setState({ index })
 //相容錯誤
 if (!this.scroll) return;
 //拿到當前項的位置資料
 let layout = this.laout_list[index];
 let rx = deviceWidth / 2;
 //公式
//歡迎加入全棧開發交流圈一起學習交流：864305860
 let sx = layout.x - rx + layout.width / 2;
 //如果還不需要移動,原地待著
 if (sx < 0) sx = 0;
 //移動位置
 sx < this.scrollW - deviceWidth && this.scroll.scrollTo({ x: sx, animated: bl });
 //結尾部分直接移動到底
 sx >= this.scrollW - deviceWidth && this.scroll.scrollToEnd({ animated: bl });
 //觸發一些需要的外部事件
 this.props.onChange && this.props.onChange(index);

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。