react-native-swiper组件-轮播

无意间发现React的版本又更新到了0.51了。这又意味着某些群体面临的踩坑时节的到来。（啊哈哈哈！！想想就觉得特别开心）
如此便来抢先看看RN公主这次又描的是哪处眉。

用手动去计算偏移量并且下载定时器的方法去封装轮播图功能显得太过繁琐。正所谓他山之石可以攻玉。显然，引用已经封装好的三方开源组件能让我们在编写代码时事半功倍。而react-native-swiper正是一个能用于做轮播效果的三方组件。

1、github上的实例：

https://github.com/leecade/react-native-swiper

2、基本命令

• 安装：npm i react-native-swiper --save

• 查看：npm view react-native-swiper

• 删除：npm rm react-native-swiper --save

3、属性

所有ScrollView组件拥有的属性react-native-swiper都拥有。

• Basic

属性	默认值	类型	描述
horizontal	true	bool	设置轮播方向
loop	true	bool	是否循环播放
index	0	number	初始进入页面标识为0的页面
showsButtons	false	bool	是否显示控制按钮（即左右两侧的箭头是否可见）
autoPlay	false	bool	是否自动轮播
onIndexChanged	(index)=>null	func	当用户拖拽时更新索引调用

• Custom basic style & content

属性	默认值	类型	描述
width	-	number	宽度，默认flex：1全屏
height	-	number	高度，默认flex：1全屏
index	0	number	初始进入页面标识为0的页面
style	{...}	style	只加载当前索引
loadMinimal	false	bool	只加载当前索引
loadMinimalSize	1	bumber	查看当前索引
loadMinimalLoader	<ActivityIndicator/>	element	自定义预加载样式

• Pagination

属性	默认值	类型	描述
showsPagination	true	bool	在页面下边显示圆点，以表明当前页面位于第几个
renderPagination	-	func	通过三个参数（index,total,context）去渲染如何分页
dot	<View style={{backgroundColor: '#e6e6e6',width: 5,height: 5,borderRadius: 4,marginLeft: 3, marginRight: 3, marginTop: 3,marginBottom: 3}} />	element	允许自定义元素样式
activeDot	<View style={{backgroundColor: '#e6e6e6',width: 5,height: 5,borderRadius: 4,marginLeft: 3, marginRight: 3, marginTop: 3,marginBottom: 3}} />	element	允许自定义当前选择点元素样式
dotStyle	-	object	允许自定义当前选择点元素样式

• AutoPlay

属性	默认值	类型	描述
autoplay	true	bool	设置轮播图为自动播放模式
autoplayTimeout	2.5	number	设置轮播间隔
autoplayDirection	ture	bool	控制轮播图是否循环

使用方式

• 引用外部组件

import Swiper from 'react-native-swiper';

• 在render方法中返回swiper组件
  showsButtons代表向左向右滑的指示按钮

<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>

• 设置样式
  设置每个view全屏显示。view里面的内容居中。

wrapper: {
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    }

• 导入外部组件、通过Dimension获取屏幕宽度。{width}代表ES6语法的解构赋值

import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions
} from 'react-native';
import Swiper from 'react-native-swiper';
const {width} = Dimensions.get('window');  //解构赋值 获取屏幕宽度

• 在render方法中返回一个顶级组件View。里面装载两个swiper
  第一个轮播图设置为竖向滚动，第二个轮播图设置为横向滚动。同时设置他们自动播放。

export default class App extends Component<{}> {
  render() {
    return (
        <View style={styles.container}>
            {/*设置horizontal为竖向排列 autoplay为自动播放*/}
             <Swiper style={styles.wrapper} height={200} horizontal={false} autoplay autoplayTimeout={1}  >
                <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 style={styles.wrapper} height={240} autoplay
                    onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
                    dot={<View style={{backgroundColor:'rgba(0,0,0,.5)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
                    activeDot={<View style={{backgroundColor: 'yellow', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
                    paginationStyle={{
                        bottom: 23, left: null, right: 10
                    }}

                    loop>
                <View style={styles.slide} >
                    <Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>
                    <Image resizeMode='stretch' style={styles.image} source={require('./img/1.jpg')} />
                </View>
                <View style={styles.slide}>
                    <Text numberOfLines={1}>Big lie behind Nine’s new show</Text>
                    <Image resizeMode='stretch' style={styles.image} source={require('./img/2.jpg')} />
                </View>
                <View style={styles.slide} >
                    <Text numberOfLines={1}>Why Stone split from Garfield</Text>
                    <Image resizeMode='stretch' style={styles.image} source={require('./img/3.jpg')} />
                </View>
                <View style={styles.slide}>
                    <Text numberOfLines={1}>Learn from Kim K to land that job</Text>
                    <Image resizeMode='stretch' style={styles.image} source={require('./img/4.jpg')} />
                </View>
            </Swiper>
        </View>
            </Swiper>
        </View>

    );
  }
}

• 设置样式

const styles = StyleSheet.create({
    container: {
        flex: 1
    },

    wrapper: {
    },

    slide: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: 'transparent'
    },

    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },

    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },

    image: {
        width:width,
        flex: 1
    }
});