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

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

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

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

這些組件分成下面兩種.

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

準(zhǔn)備

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

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

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

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

開發(fā)

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

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

使用TouchableOpacity包裹內(nèi)容項,同時調(diào)用setLaout方法將每個項的寬高等屬性記錄下來,為我們后面計算當(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>

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

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;
 //拿到當(dā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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: