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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、許昌網(wǎng)站維護(hù)、網(wǎng)站推廣。

這些組件分成下面兩種.

第一種非常簡單,同時大多數(shù)第三方組件都能達(dá)到效果.這里重點(diǎn)講述第二種,我們要讓第二種組件不僅能左右滑動,同時還能夠在點(diǎn)擊的時候自動滑動,將點(diǎn)擊的位置滑動到正中間.

準(zhǔn)備

我們先來分析一波.一個滑動組件在APP上是一種什么狀態(tài).

這里可以看出,tab組件需要考慮到長度超過APP的屏幕,并且在超過之后能夠滑動.

同時計(jì)算出當(dāng)前位置需要滑動多少距離才能夠?qū)⑽恢镁又?
需要滑動的位置=點(diǎn)擊位置的左邊距-APP屏幕/2+點(diǎn)擊位置的寬度/2

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

開發(fā)

使用ScrollView組件承載tab項(xiàng),這樣就可以非常簡單的達(dá)到滑動的效果.同時添加horizontal、directionalLockEnabled、showsHorizontalScrollIndicator、snapToAlignment幾個屬性.

<ScrollView ref={e => this.scroll = e}
 horizontal directionalLockEnabled
 showsHorizontalScrollIndicator={false}
 snapToAlignment="center">
 {this.props.data.map((item, index) =>
  {/*具體項(xiàng)*/}
 )}
</ScrollView>

使用TouchableOpacity包裹內(nèi)容項(xiàng),同時調(diào)用setLaout方法將每個項(xiàng)的寬高等屬性記錄下來,為我們后面計(jì)算當(dāng)前位置做準(zhǔn)備.

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

記錄每個項(xiàng)渲染之后的位置,將這些值存在變量里,為后面計(jì)算做準(zhǔn)備.

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

接下來就是點(diǎn)擊自動變換位置的計(jì)算了.

setIndex(index, bl = true) {
 //先改變點(diǎn)擊項(xiàng)的顏色
 this.setState({ index })
 //兼容錯誤
 if (!this.scroll) return;
 //拿到當(dāng)前項(xiàng)的位置數(shù)據(jù)
 let layout = this.laout_list[index];
 let rx = deviceWidth / 2;
 //公式
 let sx = layout.x - rx + layout.width / 2;
 //如果還不需要移動,原地待著
 if (sx < 0) sx = 0;
 //移動位置
 sx < this.scrollW - deviceWidth && this.scroll.scrollTo({ x: sx, animated: bl });
 //結(jié)尾部分直接移動到底
 sx >= this.scrollW - deviceWidth && this.scroll.scrollToEnd({ animated: bl });
 //觸發(fā)一些需要的外部事件
 this.props.onChange && this.props.onChange(index);
}

gitee地址

github地址

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁名稱：react-native動態(tài)切換tab組件的方法
文章源于：http://jinyejixie.com/article40/iiecho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司、ChatGPT、標(biāo)簽優(yōu)化、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)