[Native] react-native-swiper

react-native-swiper

native에서 제공하는 swiper 기능이다.

설치

npm i react-native-swiper --save
or
yarn add react-native-swiper

간단 사용예시!

import Swiper from 'react-native-swiper'

export default class SwiperComponent extends Component {
  render() {
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    )
  }
}

swiper 하고자 하는 목록을 swiper 태그로 감싼다.

방향에 따라서 width, height 가 지정되어 있지 않으면 전체사이즈를 타겟 잡기 때문에
swiper 할 목록의 사이즈를 지정해 주어야 동작한다.

loop, autoplay 등의 기능들을 쓰기만 하면 간편히 사용 가능함.

<Swiper height="100%" showsPagination={false} autoplay loop>
</Swiper>

// pagination 기능 off, 자동넘기기, loop 기능