快捷導(dǎo)航

react-native動(dòng)態(tài)切換tab組件的方法

更新時(shí)間：2018年07月07日 10:36:08 作者：瘋狂紫蕭

在APP中免不了要使用tab組件,有的是tab切換,也有的是tab分類切換.這篇文章主要介紹了react-native動(dòng)態(tài)切換tab組件的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

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

這些組件分成下面兩種.

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

準(zhǔn)備

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

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

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

這個(gè)公式也就是我們自動(dòng)滑動(dòng)的核心了.

開發(fā)

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

<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),同時(shí)調(diào)用setLaout方法將每個(gè)項(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>

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

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

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

setIndex(index, bl = true) {
 //先改變點(diǎn)擊項(xiàng)的顏色
 this.setState({ index })
 //兼容錯(cuò)誤
 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;
 //如果還不需要移動(dòng),原地待著
 if (sx < 0) sx = 0;
 //移動(dòng)位置
 sx < this.scrollW - deviceWidth && this.scroll.scrollTo({ x: sx, animated: bl });
 //結(jié)尾部分直接移動(dòng)到底
 sx >= this.scrollW - deviceWidth && this.scroll.scrollToEnd({ animated: bl });
 //觸發(fā)一些需要的外部事件
 this.props.onChange && this.props.onChange(index);
}

gitee地址

github地址

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: