[React Native]-Scroll To

안녕하세요. 리액트 네이티브 스크롤 뷰를 사용하시다가 스크롤의 위치를 이동해 보고 싶으신 적 있으신가요?

오늘은 스크롤을 이동할 수 있는 Scroll To에 대해 알아보도록 하겠습니다.

▲오늘의 예제

---

먼저 ScrollView에 ref를 설정해줍니다.

<ScrollView 

   style={styles.container} 

   ref={ref => (this.scrollView = ref)}

>

   ...

</ScrollView>

그런 다음 버튼을 클릭했을 때 this.scrollView에 scrollTo를 설정해줍니다.

 onPress = () => {

    this.scrollView.scrollTo({

      y: 0

    });

  };

※이때 x, y, animation 등 자유롭게 설정한 뒤 사용하시면 됩니다!

 

<TouchableOpacity style={styles.button} onPress={this.onPress}>

     <Text style={{ fontSize: 24 }}> 맨 위로 이동 </Text>

 </TouchableOpacity>