react native 뷰페이저 인디케이터

 

https://www.npmjs.com/package/@react-native-community/viewpager

@react-native-community/viewpager

 

 

 

//인디케이터
    indicator(position){
        const {data} = this.state
        if(data.images == undefined){
            return(<View></View>)
        }else{
            return(
                <View style = {{ flexDirection:'row' }}>
                    {data.images.map((value,index) => 
                        <View style ={{
                            marginHorizontal:3,
                            width:10,
                            height:10,
                            backgroundColor: position == index ? 'white':'gray',
                            borderRadius:120
                            }}></View>
                    )}
                </View>
            )
        }
    }

<View style={{ margin: 15, width: width, aspectRatio: 16 / 9, backgroundColor: AppStyle.AppThemeColorGray }}>
                                                    <View style = {{flex:1,justifyContent:'flex-end'}}>
                                                        <ViewPager
                                                            style={{ flex: 1 }}
                                                            initialPage={0}
                                                            scrollEnabled={true}
                                                            orientation={"horizontal"}
                                                            onPageSelected = {(e) =>this.setState({image_position : e.nativeEvent.position})}
                                                        >
                                                            {data.images.map((value, index) =>
                                                                <View style={{ flex: 1 }}>
                                                                    <Image
                                                                        resizeMode ='contain'
                                                                        style={{ flex: 1, backgroundColor: 'black' }}
                                                                        source={{ uri: value }}
                                                                    />
                                                                </View>
                                                            )}
                                                        </ViewPager>

                                                        {/* 인디케이터  */}
                                                        <View style={{
                                                            width: 'auto',
                                                            height: 10,
                                                            backgroundColor:'transparent',
                                                            position: 'absolute',
                                                            alignSelf: 'center',
                                                            bottom: 10
                                                        }}>{this.indicator(image_position)}</View>
                                                    </View>
                                                </View>