"스티커"중앙 요소는 기본이 문제에 대한

Question

내 완전한 소스 코드가 엑스포 응용 프로그램으로 게시 목록보기 반응한다. ScrollView를 사용하여 수백 또는 수천 개의 제목이있는 페이지를 탐색하려면 왼쪽 및 오른쪽으로 스 와이프하고 싶습니다.

이 경우 사용자가 페이지 사이를 스 와이프하여 바로 이전 및 다음 페이지를 볼 수 있도록 최소한의 데이터 만 사용하는 것이 목표입니다.

는 그래서 같은 3 요소 배열을로드 오전 : 돌아 오는하여 상태 업데이트 될

[Previous, Current, Next] 

가 (단순 유지하기 위해 여기에 사용되지 않음) 다시 렌더링하고 목록을 집중할 것입니다.

내 목표는 내 ScrollView이 항상 "현재"페이지의 "가운데 맞춤"입니다.

이전 페이지와 다음 페이지로 스크롤되는 페이지는 적절한 미리 계산 된 배열을로드하여 현재 페이지에 포커스가 유지되지만 이전 페이지와 다음 페이지 (오프 스크린)가 적절히 업데이트되도록 handleScroll 메서드에 의해 처리됩니다. 나는 또한에 scrollTo에 시도했습니다 ScrollView

그리고

componentDidMount() { 
    // Attempt to keep "center" element in array as focused "screen" in the horizontal list view 
    this.scrollView.scrollTo({ x: width, y: 0, animated: false }); 
} 

에

contentOffset={{ x: width, y: 0 }} :

handleScroll (event) { 
    //const x = event.nativeEvent.contentOffset.x; 

    const { activeIndex, scrollTimes } = this.state; 

    const windowWidth = Dimensions.get('window').width; 
    const eventWidth = event.nativeEvent.contentSize.width; 
    const offset = event.nativeEvent.contentOffset.x; 
    console.log('event width: ', eventWidth); 
    console.log('event offset: ', offset); 

    console.log('scrollTimes: ', scrollTimes); 
    //if (scrollTimes <= 1) return; 

    if (windowWidth + offset >= eventWidth) { 
     //ScrollEnd, do sth... 
     console.log('scrollEnd right (nextPage)', offset); 
     const nextIndex = activeIndex + 1; 
     console.log('nextIndex: ', nextIndex); 

    // Load next page 
    this.loadMore() 

    } else if (windowWidth - offset <= eventWidth) { 
     //ScrollEnd, do sth... 
     console.log('scrollEnd left (prevPage)', offset); 

    // Load prev page 
    this.loadPrev() 
    } 

    this.setState({ scrollTimes: scrollTimes + 1 }); 
} 

나는의 조합을 사용하여 "현재"페이지의 균형을 위해 노력했다 this.setState 이후의 콜백이지만 행운이 없었습니다.

"센터링"이 Animated을 사용하여 수행 될 수 있는지 궁금합니다.

Answer 1

나는이 샷을 주었지만 나는 그 문제를 이해하고 있는지 잘 모르겠다. 그리고 이것이 얼마나 잘 유지 될지 모르겠다.

기본적으로 handleScroll 기능을 크게 단순화했습니다. 먼저 스크롤 완료 여부를 확인한 다음 그 화면에 언제 도착했는지 "이전"화면인지 "다음"인지를 결정합니다. 이미 중간 화면 인 경우 아무 작업도 수행하지 않습니다.

난 당신의 코드에서 화재가 발생하고 데이터를로드하는 것이었다 고 생각합니다. 처음 또는 마지막이 아니라 중간 화면 인 경우입니다. 따라서 각 전환에 대해 두 번 발사됩니다.

여기 handlescroll이 내가 이라고 생각하면이 도움이 될 것입니다.

handleScroll (event) { 
    const offset = event.nativeEvent.contentOffset.x; 
    const mod = offset % width; 

    if (mod === 0) { // only transition on scroll complete 
    if (offset === width * 2) { // last screen 
     console.log('load more') 
     this.loadMore(); 
     this.scrollView.scrollTo({ x: width, y: 0, animated: false }); 
    } else if (offset !== width) { // first screen 
     console.log('load prev') 
     this.loadPrev(); 
     this.scrollView.scrollTo({ x: width, y: 0, animated: false }); 
    } 
    } 
} 

그리고 그것을 시연 Snack.