반응-원래 스크롤을 평면 리스트를 사용하여 맨 위로 이동

반응-원래 스크롤을 평면 리스트를 사용하여 맨 위로 이동

나는 내 플랫리스트의 꼭대기로 스크롤하는 데 많은 어려움을 겪고 있어. 그래서 어떤 도움이라도 고마워할 거야!

기본적으로 처음 5개 항목을 소방기지에서 가져온 다음 OnEndReached가 호출되면 다음 5개 항목을 목록에 추가하십시오.

data: [...this.state.data, ...results]

현재 보기 맨 위에 다음과 같은 새로 고침 단추가 있다.

this.flatListRef.scrollToOffset({ animated: true, y: 0 });

처음 5개의 항목이 렌더링될 때 이 항목을 클릭하면 예상대로 목록의 맨 위로 스크롤된다.이 문제는 목록을 추가한 후에만 발생한다(내 생각엔 항목이 오프뷰인가?).

나도 'ScrollToItem'을 사용해 보았지만 Resact Native 문서의 다음 내용 때문에 작동하지 않을 것 같다.

참고: getItemLayout 받침대를 지정하지 않고 렌더 창 밖의 위치로 스크롤할 수 없음.

누가 무슨 일이 일어나고 있는지 설명해줄 수 있어? 아니면 내가 뭘 잘못하고 있는지 알 수 있어?

미리 고맙다!

getItemLayout: (이 기능이 어떻게 작동하는지 또는 길이 및 오프셋을 어떻게 작동하는지 완전히 알 수 없음)

getItemLayout = (data, index) => (
{ length: 50, offset: 50 * index, index }
)

return (
  <View>
    <FlatList
      ref={(ref) => { this.flatListRef = ref; }}
      onScroll={this.handleScroll}
      data={this.state.data}
      keyExtractor={item => item.key}
      ListFooterComponent={this.renderFooter()}
      onRefresh={this.handleRefresh}
      refreshing={this.state.newRefresh}
      onEndReached={this.handleEndRefresh}
      onEndReachedThreshold={0.05}
      getItemLayout={this.getItemLayout}
      renderItem={this.renderItem}
    />
    {this.state.refreshAvailable ? this.renderRefreshButton() : null}
  </View>
);

올바른 구문은

this.flatListRef.scrollToOffset({ animated: true, offset: 0 });

그리고 당신은 또한 사용할 수 있다.

스크롤토인덱스

만약 누군가가 후크로 이것을 어떻게 하는지에 대해 길을 잃었을 때를 대비해서, 여기 예가 있다.

function MyComponent() {
    const flatListRef = React.useRef()

    const toTop = () => {
        // use current
        flatListRef.current.scrollToOffset({ animated: true, offset: 0 })
    }

    return (    
        <FlatList
            ref={flatListRef}
            data={...}
            ...
        />
    )
}

가장 큰 차이점은 당신이 그것에 접근하는 것 입니다..current

반응 후크용

1. import React, {useRef} from 'react'
2. ->라고 선언하다.const flatListRef = useRef()
3. 로 정하다ref={flatListRef}
4. 라고 부르다flatListRef.current.scrollToOffset({animated: false, offset: 0})

이 답변에서 나는 플랫리스트를 오른쪽 또는 왼쪽으로 스크롤할 수 있는 2개의 버튼이 있는 매우 쉬운 코드 조각에 대해 언급했다.이 코드를 사용하여 프로그램적으로 스크롤되는 플랫리스트의 다른 사용 사례를 달성할 수 있다.

//import
import React, { useEffect, useState, useRef, useCallback } from 'react';

//React class declaration.
const DocumentsInfo = ({ route, navigation }) => {
  
  //state variable
  const [documentsArray, setDocumentsArray] = useState({}); // array being shown in flatlist.
  const [maxVisibleIndex, setMaxVisibleIndex] = useState(0); // highest visible index currently visible.
  const [minVisibleIndex, setMinVisibleIndex] = useState(0); // lowest visible index currently visible.
  const flatListRef = useRef() // reference of flatlist.

  // callback for whenever flatlist scrolls
  const _onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
     setMaxVisibleIndex(viewableItems[viewableItems.length - 1].index);
     setMinVisibleIndex(viewableItems[0].index);
  }, []);

  // function for scrolling to top
  const scrollToTop = () => { 
    setMinVisibleIndex(0);
    setMaxVisibleIndex(0);
    flatListRef.current.scrollToIndex({ index: 0, animated: true });
  };

  // function for scrolling to bottom
  const scrollToBottom = () => { 
    let temp = documentsArray.length - 1;
    setMinVisibleIndex(temp);
    setMaxVisibleIndex(temp);
    flatListRef.current.scrollToIndex({ index: temp, animated: true });
  };

  // function for moving flatlist left and right by 1 index
  const moveNextPreviousHorizontalFlatlist = (isNext) => {
     if (isNext) {
        let maxVisible = maxVisibleIndex + 1;
        if (maxVisible < documentsArray.length) {
           let minVisible = minVisibleIndex + 1;
           setMinVisibleIndex(minVisible);
           setMaxVisibleIndex(maxVisible);
           flatListRef.current.scrollToIndex({ index: maxVisible, animated: true });
        }
     }
     else {
        let minVisible = minVisibleIndex - 1;
        if (minVisible >= 0) {
           let maxVisible = maxVisibleIndex - 1;
           setMinVisibleIndex(minVisible);
           setMaxVisibleIndex(maxVisible);
           flatListRef.current.scrollToIndex({ index: minVisible, animated: true });
        }
      }
   };

   // UI 
   return (
       <View>
       { maxVisibleIndex != documentsArray.length - 1 &&
          <View style={styles.Refresh}>
            <TouchableOpacity onPress={() =>
               moveNextPreviousHorizontalFlatlist(true)
            }>
             <Image style={styles.Refresh} source={Refresh} />
            </TouchableOpacity>
           </View>
       }

       <FlatList
         ref={flatListRef}
         onViewableItemsChanged={_onViewableItemsChanged}
         showsHorizontalScrollIndicator={false}
         horizontal
         keyExtractor={(item, index) => item.fileName + index}
         data={documentsArray}
         renderItem={({ item, index }) => {
           return (  <DocumentListItem /> )
         }}
       />

       { minVisibleIndex != 0 &&
         <View style={styles.Refresh}>
           <TouchableOpacity onPress={() =>
              moveNextPreviousHorizontalFlatlist(false)
            }>
             <Image style={styles.Refresh} source={Refresh} />
           </TouchableOpacity>
         </View>
       }
     </View>
     );

참조URL: https://stackoverflow.com/questions/50436635/react-native-scroll-to-top-with-flatlist