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

<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;
 //拿到當前項的位置數(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);
}