React Native学习之开源轮播组件react-native-swiper

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

支持 Android/iOS

在项目的根目录（即package.json文件所在的目录）执行 npm 的命令：

• 安装模块：npm i react-native-swiper --save
• 查看模块：npm view react-native-swiper
• 删除模块：npm rm react-native-swiper --save
• 查看帮助命令：npm help 命令

注意：设置轮播组件 Swiper 的包裹容器高度，使用属性 height 进行设置，不能通过 style 样式设置

实现滚动视图的原理：ScrollView，通过计算步长确定滑动位置

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    View,
} from 'react-native';

import Swiper from 'react-native-swiper'

//获取屏幕宽高
//Dimensions.get('window').width;
//Dimensions.get('window').height;

class RNAPP extends Component{
    constructor(props) {
        super(props);
    }

    render() {
        //showsButtons: 左右两侧上一页和下一页控制按钮
        //autoplay: 自动播放，默认false
        //autoplayTimeout: 播放周期，默认2.5s
        /*
        return (
            <Swiper style={styles.wrapper} showsButtons={true} autoplay={true} autoplayTimeout={5}>
                <View style={styles.slide1}>
                    <Text style={styles.text}>Hello Wwiper</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>
        );
        */
        //带图片轮播
        return (
            <Swiper style={styles.wrapper} showsButtons={false} height={400}>
                <View style={styles.slide1}>
                    <Image
                        style={{width:200,height:300}}
                        resizeMode='stretch'
                        source={{uri:'https://www.baidu.com/img/bd_logo1.png'}}
                        />
                </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>
        );
    }
}

const styles = StyleSheet.create({
    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',
    }
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);