[React Native]-Sticky

ReactNative/개발 2019. 11. 24. 23:51

안녕하세요. 스크롤 뷰를 내리다 Header에 걸치면 특정 컴포넌트의 스크롤을 멈추게 하고 싶은 적 있으신가요? 

오늘은 스크롤 뷰의 Sticky 속성인 stickyHeaderIndices에 대하여 알아보도록 하겠습니다.



▲오늘의 예제



 

정말 간단합니다! 


ScrollView(스크롤 뷰) 속성에 stickyHeaderIndices를 추가해주시면 됩니다!



<ScrollView      stickyHeaderIndices={[2]} // 배열 안의 숫자는 sticky 속성을 사용할 컴포넌트의 위치를 적어줍니다.
>
   ...
</ScrollView>


이런 식으로 사용해주시면 됩니다. 

(위 예제에서는 sticky 컴포넌트가 3번째 위치하였기 때문에 배열 안의 숫자를 2로 적어주었습니다)


감사합니다.


저작자표시 비영리 변경금지

'ReactNative > 개발' 카테고리의 다른 글

[React Native]-Scroll To  (0) 2019.11.24
[React Native]-import 절대경로 설정 방법  (2) 2019.11.17
[React Native]-상태 바(Status Bar) 높이 구하기  (0) 2019.11.17
Posted by AddChan
,

[React Native]-Scroll To

ReactNative/개발 2019. 11. 24. 23:09

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

오늘은 스크롤을 이동할 수 있는 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
Posted by AddChan
,

티스토리툴바