[react-native] 이미지 슬라이더 / 현재 이미지 번호(index) 표시

npm i react-native-image-slider-box

intellidev1991/react-native-image-slider-box

 

import { SliderBox } from 'react-native-image-slider-box';

 state = {
    currentIndex: 1,
    imageList: [require('...'), require(...')],
  };

 

<View style={{ width: wp('100%'), height: hp('30%'), flex: 1 }}>
              <SliderBox
                autoplay={true}  //자동 슬라이드 넘김
                circleLoop={true} //맨끝 슬라이드에서 다시 첫슬라이드로
                resizeMode="cover"  // 이미지 사이즈 조절값
                images={this.state.imageList} // 이미지 주소 리스트 
                dotColor="rgba(0,0,0,0)" // 아래 점 투명으로 안보이게 가림
                inactiveDotColor="rgba(0,0,0,0)" 
                ImageComponentStyle={{ width: wp('100%'), height: hp('30%') }} // 이미지 Style 적용
                currentImageEmitter={(index) => { // 이미지가 바뀔때 어떤 동작을 할지 설정 
                  this.setState({
                    currentIndex: index + 1,
                  });
                }}
              />
              <View
                style={{
                  position: 'absolute',
                  bottom: '8%',
                  right: 0,
                  paddingTop: 4,
                  paddingRight: 6,
                  paddingBottom: 4,
                  paddingLeft: 10,
                  borderTopLeftRadius: 14,
                  borderBottomLeftRadius: 14,
                  backgroundColor: 'rgba(0,0,0,0.6)',
                }}>
                <Text style={{ fontSize: 10, color: '#ffffff' }}>
                //총 이미지 갯수중 현재 index가 몇인지를 나타낸다
                  {this.state.currentIndex}/{this.state.imageList.length}
                </Text>
              </View>
            </View>

위와같이 오른쪽 하단에 숫자 표시

 

 

 

 

style의 wp 와 hp 는 ? ==>

[리액트네이티브] - [react-native] 컴포넌트의 크기를 지정할때 화면비율에 맞게 지정하는 간단한 방법