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

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

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

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

在内容上依然默认采用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
  • Custom basic style & content
  • Pagination
  • Autoplay

4、基本案例(引导图)

  • 引入外部组件
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、播放案例

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小屋

Python使用tkinter打造自定义对话框完整代码

问题来源:前一阵发过一个技术文章Python编写抽奖式随机提问程序,其中有个弹出式对话框,好像上海科技大学宋老师在群里当时问了一句对话框中中奖姓名是否能显示的大...

58840
来自专栏Android点滴积累

Android ScrollView监听滑动到顶部和底部的两种方式(你可能不知道的细节)

Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动...

56770
来自专栏我杨某人的青春满是悔恨

仿【每天】首页动画

最近工作一直挺忙,偶有闲暇时都在翻看《iOS Animations by Tutorials》,受益良多,尤其是让我对Core Animation有了更深入的理...

9220
来自专栏前端说吧

JS案例 - 基于vue的移动端长按手势

当时首先想到要做长按事件的时候,我想到的是vue内部的自定义指令,毕竟官网里边有这么一句描述:

24120
来自专栏大数据钻研

HTML+CSS 面试题整理(一)

1.web标准: (1)结构标准:其语言主要包括XHTML(实现HTML向XML的过渡。)和XML(用于弥补HTML的不足) (2)表现标准:其语言主要包括C...

32180
来自专栏偏前端工程师的驿站

WebComponent魔法堂:深究Custom Element 之 面向痛点编程

前言  最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得...

21850
来自专栏Windows Community

New UWP Community Toolkit - RadialGauge

概述 New UWP Community Toolkit  V2.2.0 的版本发布日志中提到了 RadialGauge 的调整,本篇我们结合代码详细讲解  R...

439150
来自专栏程序猿

用 Python 向你比个心

之前写了一篇用 Python 画一个小猪佩奇和哆啦 A 梦,然后最近看到有人用 turtle 画了一个心,觉得挺有意思的,于是把代码复制到本地,再加了个播放音乐...

33850
来自专栏拂晓风起

Cocos2d-js 3.0 颜色变换(调整sprite/图片的色调)

16420
来自专栏非著名程序员

基础篇章:关于 React Native 之 Picker 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天我们就讲Picker ,顾名思义就是选择...

19380

扫码关注云+社区

领取腾讯云代金券