RN学习笔记 ScrollView与Segement联动

1、render部分

onScroll在滚动的过程中,每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制,数字越大,跟踪滚动位置的代码的准确性就越高

  render() {
    return (
      
        {this.renderNavBar()}
         {
            this.ScrollView = view;
          }}
          horizontal
          style={styles.wrapper}
          showsHorizontalScrollIndicator={false}
          pagingEnabled
          onMomentumScrollEnd={event => this.scrollEnd(event)}
        >
          
          
        
      
    );
  }
2、scrollEnd计算offset偏移量
  scrollEnd = event => {
    const offsetX = event.nativeEvent.contentOffset.x;
    const currentPage = Math.floor(offsetX / screenW);
    this.setState({
      tabIndex: currentPage
    });
  };
3、点击segement时滚动到对应offset
  onMarketStockTab = () => {
    this.ScrollView.scrollTo({ x: 0, y: 0, animated: true });
    this.setState({
      tabIndex: 0
    });
  };

  onUserStockTab = () => {
    this.ScrollView.scrollTo({ x: screenW, y: 0, animated: true });
    this.setState({
      tabIndex: 1
    });
  };

你可能感兴趣的:(RN学习笔记 ScrollView与Segement联动)