react native - Flatlist 의 하위 아이템 중 원하는 아이템으로 스크롤 시키기 (scrollToIndex)

Flatlist 를 이용하면 배열로 된 데이터를 이용해서 반복적인 뷰를 만들 수 있다.
Flatlist 외부에서 버튼이나 함수를 통해 원하는 아이템이 있는 곳으로 스크롤이 필요할 때가 있다.

상단에 const flatListRef = useRef(); 를 선언하고
Flatlist에 ref={flatListRef}를 추가한다.
초기 이동이 필요할 경우 initialScrollIndex 속성에 번호를 넣어주면 된다.

 const flatListRef = useRef();

 <FlatList
      ref={flatListRef}
      initialScrollIndex={1}
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.key}
/>     

useEffect나 함수에서 flatListRef.current.scrollToIndex({animated: true, index: 2}); 이런식으로 index의 값에 이동시키고 싶은 아이템 번호를 넣는다.
하지만 flatListRef.current 가 잡혀있을 때 해야 오류가 나지 않는다.

if(flatListRef.current){
      flatListRef.current.scrollToIndex({animated: true,index: 2});
}

이 예제는 함수형 컴포넌트로 작성한 것이다. 클래스형 컴포넌트는 ref나 .current 의 사용법이 좀 다르기 때문에 유의해야 한다.

전체 테스트할 수 있는 코드는 아래와 같다.
(온라인으로 결과 확인하려면 [링크] 클릭)

import React, {useRef, useState, useEffect} from 'react';
import { FlatList, View, Text,Button} from "react-native";

const data = [
  { key: 1, title : "aaa", },
  { key: 2, title : "bbb", },
  { key: 3, title : "ccc", },
  { key: 4, title : "ddd", }
];
const SetCheckBox = () => {
    const flatListRef = useRef();
    const [selectNumber, setSelectNumber] = useState(0);

    const renderItem = ({ item }) => (
            <View style={{padding:10,marginBottom:10,backgroundColor:'#eee'}}>
                <Text>{item.key} : {item.title}</Text>
            </View>
    );

    useEffect( () => {
        if(flatListRef.current){
            flatListRef.current.scrollToIndex({animated: true,index:selectNumber});
        }
    },[selectNumber])

    return(
      <>
        <View style={{ height: 40 }}>
            <FlatList
                ref={flatListRef}
                initialScrollIndex={0}
                data={data}
                renderItem={renderItem}
                keyExtractor={item => item.key}
            />            
        </View>
        <Button
              onPress={ () => setSelectNumber(2)}
              title="클릭!"
              color="#841584"
            />
          </>
    )
}
export default SetCheckBox;
Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

0 댓글
Inline Feedbacks
View all comments
TOP