react-native-page-scrollview 轮播组件

react-native-page-scrollview 轮播组件

1、组件描述：
react-native-page-scrollview是基于react native的一款轮播组件，可以实现多种酷炫效果。详细使用方法参考地址：
（1）npm 轮播组件地址
2、组件使用：
（1）先安装react-native-page-scrollview
$ npm install react-native-page-scrollview --save
（2）导入react-native-page-scrollview
import PageScrollView from ‘react-native-page-scrollview’;
（3）使用PageScrollView

<PageScrollView
    style={{width:width,height:pxToDp(370),}}
    ifInfinite={false}//false为不是无限轮播
    datas={selfList}//轮播数据
    ifAutoScroll={false}  //不是自动轮播
    pointerStyle={{width:pxToDp(26),height:pxToDp(8),borderRadius:pxToDp(4)}} //自定义指示器圆点的样式(圆点大小) 
    pointerColor={['#9B9B9B','#DADADD','#fff']}//指示器的的相关颜色.分别为:当前页的颜色,其他页的颜色,边框的颜色,属性值为数组：['#fff','#0000','#fff']
    view={(selfIndex,selfItem)=>{ //每一个自定义View的具体渲染内容
        return(
            <View key={selfIndex} style={{width:width,flexDirection:'row',justifyContent:'flex-start',flexWrap:'wrap',paddingHorizontal:pxToDp(50)}}>
                {
                    Array.isArray(selfItem) && selfItem.map((child,index)=>{
                        return (
                            <TouchableOpacity style={[styles.selfItem]} activeOpacity={1} >
                                <Image style={styles.selfIcon} source={{uri:child.article_icon}} />
                                <Text style={styles.selfText}>{child.article_title ? child.article_title.substring(0,6) : child.article_title}</Text>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        );   
    }}
/>

3、react-native-page-scrollview组件属性及方法：

4、效果图：