RN学习笔记 ScrollView与Segement联动

1、render部分

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

  render() {
    return (
      <View style={styles.container}>
        {this.renderNavBar()}
        <ScrollView
          ref={view => {
            this.ScrollView = view;
          }}
          horizontal
          style={styles.wrapper}
          showsHorizontalScrollIndicator={false}
          pagingEnabled
          onMomentumScrollEnd={event => this.scrollEnd(event)}
        >
          <QuotationList data={marketStockReqData} />
          <QuotationList data={userStockReqData} />
        </ScrollView>
      </View>
    );
  }

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
    });
  };