React-native動態切換tab元件的方法
在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,快速升職加薪,走上人生巔峰。