[ReactNative_study_7]Scroll View 사용

1) scroll view를 사용하기 위해서 react native directory 에서

react-native-web-swiper  

를 사용하였다. 기본적인 사용법은 git hup에 나와있을 것이고

https://github.com/reactrondev/react-native-web-swiper

GitHub - reactrondev/react-native-web-swiper: Swiper-Slider for React-Native and React-Native-Web

헷갈리는 부분이 있어서 기억하기 위해 작성하였다.

 

react native에서 scrollView에서 파생된 component는 예를 들어 여기서 사용되는 <Swiper/>는 scrollView에서 나왔으므로 style을 할 때 props로 containerStyle 이라는 것을 사용한다.

 

이건 screen이 넘어가는 경우 그냥 style이 아니라 containerStyle 로 적용을 해줘야 된다. 이 때,  <Swiper/> 또는 scrollView에서 파생된 component의 경우 상위 태그를 단순히 View가 아닌 ScrollView로 해줘야 swiper 내의 containerStyle이 먹히게 된다 .

 

ex)

-적용안됨

<View>
    // Swiper는 기본적으로 ScrollView에서 파생되었으므로 부모 component는 ScrollView가 되어야함
   <Swiper/ containerStyle ={{ 적용 안됨 x }}>               
</View>

-적용됨

<ScrollView>
   <Swiper/ containerStyle ={{ 적용 됨  }}>               
</ScrollView>