RN(八)——react-native-image-viewer & react-native-swiper

以项目(业务GO)为例:

react-native-swiper 轮播(用在首页的图集轮播)

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

react-native-image-zoom-viewer 图集查看(组件功能多,适合用于图集文章和大图查看)

https://github.com/ascoders/react-native-image-viewer

均是第三方组件,安装方法一样,都需要在文件顶部引入,如:

import Swiper from 'react-native-swiper';

关于'react-native-swiper'的基本用法:

基础属性:

属性

默认

类型

描述

horizontal

true

bool

如果true,滚动视图在一行中水平排列,

而不是垂直排列。

loop

true

bool

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

index

0

number

初始幻灯片索引(下标)。

showsButtons

false

bool

设置为true使控制按钮可见。

autoplay

false

bool

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

onIndexChanged

(index)=> null

func

当用户刷新时用新的索引(下标)调用

自定义基本样式和内容

属性

默认

类型

描述

width

-

number

如果没有指定默认

启用全屏模式flex: 1。

height

-

number

如果没有指定默认

全屏模式flex: 1。

style

{...}

style

请参阅源中的默认样式。

loadMinimal

false

bool

只载入当前索引幻灯片,

loadMinimalSize幻灯片前后。

loadMinimalSize

1

number

看到 loadMinimal

loadMinimalLoader

<ActivityIndicator />

element

幻灯片未加载时

显示的自定义加载器

分页

属性

默认

类型

描述

showsPagination

true

bool

设置为true

使分页可见。

paginationStyle

{...}

style

自定义样式

将与默认样式合并。

renderPagination

-

function

三个参数,

可以显示索引。

dot

<View style={{backgroundColor:'rgba(0,0,0,.2)', 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />

element

允许自定义点元素。

activeDot

<View style={{backgroundColor: '#007aff', 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />

element

允许自定义活动点元素。

dotStyle

-

object

允许自定义活动点元素。

dotColor

-

string

允许自定义活动点元素。

activeDotColor

-

string

允许自定义活动点元素。

activeDotStyle

-

object

允许自定义活动点元素。

自动播放

属性

默认

类型

描述

autoplay

true

bool

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

autoplayTimeout

2.5

number

自动播放转换之间的延迟(秒)。

autoplayDirection

true

bool

循环方向控制。

控制按钮

属性

默认

Type

Description

showsButtons

true

bool

是否显示控制箭头按钮

buttonWrapperStyle

{position: 'absolute', paddingHorizontal: 15, paddingVertical: 30, top: 70, left: 0, alignItems:'flex-start'}

style

定义默认箭头按钮的样式

nextButton

<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>‹</Text>

element

自定义右箭头按钮样式

prevButton

<Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›</Text>

element

自定义左箭头按钮样式


以上基本就可以满足对轮播组件的使用了,或许还有其他需求,那就只能再看看文档介绍。

关于'react-native-image-zoom-viewer '基本用法:

而关于图集组件的,还是没有找到相关文档,只能借助别人的咯:https://github.com/ascoders/react-native-image-viewer/blob/master/src/image-viewer.type.ts

不过还好,足够我们简单使用。唯一值得提出的便是,图集中的图片与下部的简介应该怎样连接起来,于是……

import ImageViewer from 'react-native-image-zoom-viewer';//引入图集组件

可以移步这里:http://www.cnblogs.com/vipstone/p/7611676.html

20150622173122_WNhkG

原文地址:https://www.cnblogs.com/zhengyeye/p/7717813.html