안녕하세요. 리액트 네이티브 스크롤 뷰를 사용하시다가 스크롤의 위치를 이동해 보고 싶으신 적 있으신가요?
오늘은 스크롤을 이동할 수 있는 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>
'ReactNative > 개발' 카테고리의 다른 글
| [React Native]-Sticky (0) | 2019.11.24 |
|---|---|
| [React Native]-import 절대경로 설정 방법 (2) | 2019.11.17 |
| [React Native]-상태 바(Status Bar) 높이 구하기 (0) | 2019.11.17 |
