美文网首页React Native开发小白react-nativeReact-Native实践
react-native-swiper组件-横扫你的轮播图

react-native-swiper组件-横扫你的轮播图

作者: 谦谦君子修罗刀 | 来源:发表于2017-10-08 17:01 被阅读7778次

    一念起,万水千山。一念灭,沧海桑田。
    许久不曾召幸React Native爱妃,未曾想一见竟让寡人目瞪口呆。啥~~~你就说你买包包的速度能跟上你版本迭代更新的速度么。

    小可爱.jpg

    打开终端运行之前的项目,无意间发现React的版本又更新到了0.49.2。这又意味着某些群体面临的踩坑时节的到来。(啊哈哈哈!!想想就觉得特别开心)
    如此便来抢先看看RN爱妃这次又描的是哪处眉。

    结构图.png

    首先是结构方面,这次RN版本做出了很大调整。在目录中已经找不到iOS和Android.js的身影,取而代之的是将它们合并在一起的index.js文件。并且初始代码是编写在App.js文件中。

    APP.js文件图.png

    在内容上依然默认采用ES6的写法。只是多了介绍这一栏。并且在Component<>默认加了{}。

    ok,言归正传。一般来说,主角都是压轴出场。来瞧瞧本文的主题react-native-swiper。

    用手动去计算偏移量并且下载定时器的方法去封装轮播图功能显得太过繁琐。正所谓他山之石可以攻玉。显然,引用已经封装好的三方开源组件能让我们在编写代码时事半功倍。而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
    Basic.jpg
    • Custom basic style & content


      costom.jpg
    • Pagination
    page.jpeg
    • Autoplay
    autoplay.png

    4、基本案例(引导图)

    引导图.gif
    • 引入外部组件
    import Swiper from 'react-native-swiper';
    
    • 在render方法中返回swiper组件

    showsButtons代表向左向右滑的指示按钮

    <Swiper style={styles.wrapper} showsButtons>
                <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'
        }
    

    如此一来,一个APP的引导图就做好了。

    5、播放案例

    swiper.gif
    • 导入外部组件、通过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
        }
    });
    

    相关文章

      网友评论

      • _AJH:请问为什么使用非本地图片的时候,那个指示器原点不会变化?使用本地的就不会
      • 7ccf4b7bae7d:请问我设置了horizontal={false}之后,轮播图的方向还是自右向左播放,只是指示点的方向变成了纵向排列。。。您知道这是为什么?
        日暮冰秋:@Jackkey 这个东西就是坑 什么都做不了 title还不管用呢 真是服了:sweat:
        Jackkey:我的也是这样 同问 解决了没
      • 全端玩法:如何定义动画时间?
      • uuuuuuw:请问 圆点你可以控制位置么 位置要位于最下方
        uuuuuuw:不给默认图 android上 一张图不显示 你有么有遇到
        886d6f24be9a:"export 'default' (imported as 'Swiper') was not found in 'react-native-swiper' 这是报的什么错
        谦谦君子修罗刀:可以的,你看第二个案例。Swiper组件里面有个paginationStyle属性,它可以设置页面圆点整体的样式哦。
      • gdlooker:我的不能滑动,设置autoplay为true没用。是不是与navigation有冲突,有的tab栏可以滑动
      • 风动随心:请问下怎么设置自动轮播哦,我这边设置无效
        谦谦君子修罗刀:将autoplay属性设置为true。
        {/*设置horizontal为竖向排列 autoplay为自动播放*/}
        <Swiper style={styles.wrapper} height={200} horizontal={false} autoplay autoplayTimeout={1} >

      本文标题:react-native-swiper组件-横扫你的轮播图

      本文链接:https://www.haomeiwen.com/subject/nttyyxtx.html