'ReactNative/개발'에 해당되는 글 4건

  1. 2019.11.24 [React Native]-Sticky
  2. 2019.11.24 [React Native]-Scroll To

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

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



▲오늘의 예제




 

정말 간단합니다! 


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



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


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

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


감사합니다.


Posted by AddChan
,

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

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



Posted by AddChan
,