RN 학습노트 ScrollView와 Segement 연결

1368 단어
1. 렌더 부분onScroll 굴러가는 과정에서 프레임마다 이 리셋 함수를 최대 한 번 호출한다.호출된 주파수는 scrollEventThrottle 속성으로 제어할 수 있으며, 숫자가 클수록 스크롤 위치를 추적하는 코드의 정확성이 높아진다.
  render() {
    return (
      
        {this.renderNavBar()}
         {
            this.ScrollView = view;
          }}
          horizontal
          style={styles.wrapper}
          showsHorizontalScrollIndicator={false}
          pagingEnabled
          onMomentumScrollEnd={event => this.scrollEnd(event)}
        >
          
          
        
      
    );
  }

2, scrollEnd 계산 오프셋 오프셋
  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
    });
  };

좋은 웹페이지 즐겨찾기