以项目(业务GO)为例:
react-native-swiper 轮播(用在首页的图集轮播)
https://github.com/leecade/react-native-swiper
react-native-image-zoom-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';//引入图集组件