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)', 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	允许自定义活动点元素。
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