React-Native 학습--윤 방도 제3자 구성 요소-react-native-swiper

npm 를 통 해 react-native-swiper 설치

$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save

2.항목 에서 가 져 오기

import Swiper from 'react-native-swiper';

사용

  render(){
    return(
        
          
               {this.renderImg()}
//                      +  (Text)     	
           
        

    );
  }

  renderImg(){
          var imageViews=[];
          for(var i=0;i
              );
          }
          imageViews.push(lalala);
          return imageViews;
      }

4.관련 속성 설명
1.Basic
Prop
Default
Type
Description
horizontal
true
bool
값 이 true 일 때 굴 러 가 는 내용 은 열 에 수직 으로 있 는 것 이 아니 라 가로로 배 열 됩 니 다.
loop
true
bool
false 로 설정 하면 마지막 장 까지 미 끄 러 질 때 다시 미 끄 러 지면 첫 번 째 그림 이 보이 지 않 습 니 다.
index
0
number
처음 들 어 온 페이지 가 0 으로 표 시 된 페이지 입 니 다.
showsButtons
false
bool
트 루 로 설정 하면 제어 버튼(즉,좌우 양쪽 화살표)을 볼 수 있 습 니 다.
autoplay
false
bool
트 루 로 설정 하면 페이지 가 자동 으로 이동 합 니 다.
2.Custom basic style & content
Prop
Default
Type
Description
width
-
number
특별한 설정 이 없다 면 플 렉 스:1 을 통 해 기본적으로 전체 화면 으로 설정 합 니 다.
height
-
number
특별한 설정 이 없다 면 플 렉 스:1 을 통 해 기본적으로 전체 화면 으로 설정 합 니 다.
style
{...}
style
페이지 스타일 을 설정 합 니 다.
3.Pagination
Prop
Default
Type
Description
showsPagination
true
bool
기본 값 은 true 입 니 다.페이지 아래 에 원점 을 표시 하여 현재 페이지 가 몇 번 째 에 있 는 지 표시 합 니 다.
paginationStyle
{...}
style
페이지 의 원점 스타일 을 설정 합 니 다.사용자 정의 스타일 은 기본 스타일 과 합 쳐 집 니 다.
renderPagination
 
 
 
dot
element
현재 원점 이 아 닌 스타일 을 사용자 정의 할 수 있 습 니 다.
activeDot
element
현재 페이지 의 도 트 스타일 을 사용자 정의 할 수 있 습 니 다.
4.Autoplay
Prop
Default
Type
Description
autoplay
true bool
트 루 로 설정 하면 페이지 가 자동 으로 미 끄 러 집 니 다.
autoplayTimeout
2.5 number
각 페이지 가 자동 으로 미 끄 러 지 며 머 무 르 는 시간 을 설정 합 니 다.
autoplayDirection
true bool
원점 의 방향 은 기본적으로 자신의 통 제 를 허용 합 니 다.
5.Control buttons
Prop
Default
Type
Description
showsButtons
true bool
제어 화살표 단추 보일 지 여부
buttonWrapperStyle

{position: 'absolute', paddingHorizontal: 15, paddingVertical: 30,  top: 70, left: 0, alignItems:'flex-start'}

style
기본 화살표 단추 의 스타일 정의
nextButton

‹

element
오른쪽 화살표 단추 스타일 사용자 정의
prevButton

›

element
왼쪽 화살표 단추 스타일 사용자 정의