专栏首页伟大程序猿的诞生【React Native 安卓开发】----第三方框架的引用之React-native-Swiper框架实现欢迎页【第五篇】

【React Native 安卓开发】----第三方框架的引用之React-native-Swiper框架实现欢迎页【第五篇】

前言

今天要介绍的是React-native-Swiper这个RN开源框架,如果你不想用第三方的你也可以自己用viewPagerAndroid去实现,这里先不做介绍了,很简单。 想要了解React-native-Swiper源码的童鞋可以在github直接搜索React-native-Swiper。

对于安卓同学来说应该都用过ViewPagerIndicator 做引导页或者导航栏,这里就不多说了,今天要讲的React-native-Swiper也是一款非常叼的开源框架,接下来然我们一起来看一看。

引入依赖和模块

1.首先进入到工程目录根目录下面 即:package.json所在的目录。

(package.json里面有工程信息及所有依赖,相当于安卓的gradle,然后我们所依赖的那些库在node-modules里面,就相当于安卓之前的libs文件夹)

2.通过npm安装模块

npm i react-native-swiper –save 成功后会有如下显示:

这个意思就是安装这个模块到node-modules,同时配置到package.json里面去。 – save的作用就是配置package.json。 如下:会在package.json依赖里面多了一个react_native-swiper:”^1.5.4”

同时让我们观察一下node-modules文件夹:

多了react-native-swiper文件

3.几个常用命令便于管理工程

查看模块:npm view react-native-swiper 删除模块:npm rm react-native-swiper –save (这个添加save会在删除的同时去除package.json中的依赖) 查看帮助命令:npm help 命令 (例如npm help -i查看i的使用)

使用效果

先来看一下效果:

下面是代码:可以直接自己coyp自己体验一下,切记AppRegistry.registerComponent('hello', () => hello);需要自己改一下

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

import Swiper from 'react-native-swiper';

class hello extends Component {
  render() {
    return (
      <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>
    );
  }
}

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('hello', () => hello);

详细属性

接下来让我们好好探索一下这个框架的基本属性:

基本属性

Prop

Default

Type

Description

horizontal

true

boolean

为false提示小圆点在侧面

loop

true

boolean

设置为false以禁用连续循环模式

index

0

int

默认显示第几页

showsButtons

false

int

设置为true显示button

autoplay

false

boolean

设置为true将启用自动播放模式。

下面演示一下下面这些样式的效果 我设置默认选择第二页,显示button,小圆点在最下面,禁用无限循环。
<Swiper style={styles.wrapper} showsButtons={true} horizontal={true} loop={false} index={1}>
        <View style={styles.slide1}>
          <Text style={styles.text}>我是第一页</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>我是第二页</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>我是第三页</Text>
        </View>
      </Swiper>

显示效果如下:

自定义基本样式

Prop

Default

Type

Description

width

-/-

number

默认flex:1

height

-/-

number

默认flex:1

style

{…}

style

请参阅源中的默认样式。

loadMinimal

false

boolean

只加载当前索引幻灯片

loadMinimalSize

1

number

请参阅loadMinimal

loadMinimalLoader

《ActivityIndicator/》

element

在未加载幻灯片时显示自定义加载程序

接来下体验下一下效果 设置宽高为200,200,loadMinimal为true加载当前索引幻灯片。

<Swiper style={styles.wrapper}
              showsButtons={true}
              horizontal={true} 
              loop={false} 
              index={1}
              loadMinimal={true}>

效果图: 可以看出宽高都有了变化 而且只加载了一个 视图,其他的都是空白的 当我们把loadMinimal设置为true同时,loadMinimalSize设置为3这时候就回复正常了,让我们看一下效果:

<Swiper style={styles.wrapper}
              showsButtons={true}
              horizontal={true} 
              loop={false} 
              index={1}

              loadMinimal={true}
              loadMinimalSize={3}

             >

Pagination分页

Prop

Default

Type

Description

showsPagination

true

boolean

设置为true可使分页可见

paginationStyle

{…}

style

自定义样式将与默认样式合并

renderPagination

-/-

function

通过三个参数(index, total, context)确定如何渲染

dot

《View style={{backgroundColor:’rgba(0,0,0,.2)’, width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /》

element

允许自定义点元素

activeDot

《View style={{backgroundColor: ‘#007aff’, width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /》

element

允许自定义active-dot元素

接下来让我们看一个分页的demo: 先看一下效果:

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

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

import Swiper from 'react-native-swiper';

const { width } = Dimensions.get('window')

class hello extends Component {
  render() {
    return (
      <View>
        <Swiper style={styles.wrapper} height={200} horizontal={true} autoplay={true}>
          <View style={styles.slide1}>
            <Text style={styles.text}>第一页</Text>
          </View>
          <View style={styles.slide2}>
            <Text style={styles.text}>第二页</Text>
          </View>
          <View style={styles.slide3}>
            <Text style={styles.text}>第三页</Text>
          </View>
        </Swiper>

        <Swiper style={styles.wrapper} height={240}
          dot={<View style={{backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
          activeDot={<View style={{backgroundColor: '#000', 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} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./imgs/1.jpg')} />
          </View>
          <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./imgs/2.jpg')} />
          </View>
          <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./imgs/3.jpg')} />
          </View>
          <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
            <Image resizeMode='stretch' style={styles.image} source={require('./imgs/4.jpg')} />
          </View>
        </Swiper>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
  },

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

  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'
  },

  image: {
    width,
    flex: 1
  }
});
AppRegistry.registerComponent('hello', () => hello);

Autoplay自动换图

Prop

Default

Type

Description

autoplay

true

boolean

设置为true将启用自动播放模式

autoplayTimeout

2.5

number

延迟时间(秒

autoplayDirection

true

boolean

循环方向控制

还以上个例子讲解 这里设置 autoplayDirection为false ;autoplayTimeout为1; 效果如图:

代码如下:

 <Swiper style={styles.wrapper} height={200} horizontal={true} autoplay={true} autoplayTimeout={1} autoplayDirection={false}>

Control buttons自定义按钮

Prop

Default

Type

Description

showsButtons

true

boolean

设置为true将启用自动播放模式

buttonWrapperStyle

{backgroundColor: ‘transparent’, flexDirection: ‘row’, position: ‘absolute’, top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: ‘space-between’, alignItems: ‘center’}

style

自定义样式

nextButton

《Text style={styles.buttonText}>›

element

容许自定next按钮

prevButton

《Text style={styles.buttonText}>›

element

容许自定prev按钮

在上一个demo的基础上进行衍生demo: 先看效果图:

再看样式代码:

<Swiper style={styles.wrapper} height={200} horizontal={true} autoplay={true} autoplayTimeout={1} autoplayDirection={false} showsButtons={true}nextButton={<Text style={styles.buttonText}>》》</Text>}>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【React Native 安卓开发】----侧边栏的实现DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

    做过安卓原生开发的童鞋们应该都做过侧边栏这个东西,而且对于开源框架SlidingMenu和android官方侧滑菜单DrawerLayout应该都不陌生。 ...

    先知先觉
  • 【React Native 安卓开发】----(View实战之仿携程)【第三篇】

    如图:我们可以想到先做三个View 这三个View使用FlexBox平分,flex都为1,这里的flex其实就相当于安卓里面的weight权重的概念。

    先知先觉
  • View.Post()保证UI带你装逼带你飞

    因为当onCreate()方法被调用的时候会通过LayoutInflater将xml文件填充到ContentView。 填充过程中只包括创建视图,不包括设置...

    先知先觉
  • 10个编译为JavaScript的语言

    原文链接:https://www.zcfy.cc/article/10-languages-that-compile-to-javascript

    前端博客 : alili.tech
  • Day1爬虫原理

    爬虫基本流程 发起请求 通过HTTP库向目标站点发起请求,即发送一个Request,请求可以包含额外的headers等信息,等待服务器响应。 获取响应内容 如果...

    林清猫耳
  • why some product does not have Note assignment block

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

    Jerry Wang
  • 训练深度神经网络的必知技巧,你知道哪些?

    本文将主要介绍 8 种深度神经网络实现细节的技巧或 tricks,包括:数据增广、图像预处理、网络初始化、训练过程中的技巧、激活函数的选择、不同正则化方法、来自...

    AI研习社
  • 如何训练一个性能不错的深度神经网络

    本文主要介绍8种实现细节的技巧或tricks:数据增广、图像预处理、网络初始化、训练过程中的技巧、激活函数的选择、不同正则化方法、来自于数据的洞察、集成多个深度...

    机器学习AI算法工程
  • 10个妨碍进步的前端学习方式

    腾讯NEXT学位
  • 深度神经网络训练的必知技巧

    作者:章华燕 编辑:李文臣 本文主要介绍8种实现细节的技巧或tricks:数据增广、图像预处理、网络初始化、训练过程中的技巧、激活函数的选择、不同正则化方法、来...

    机器学习算法工程师

扫码关注云+社区

领取腾讯云代金券