RN(八)——react-native-image-viewer & react-native-swiper
2017-10-23 17:12
471 查看
以项目(业务GO)为例:react-native-swiper 轮播(用在首页的图集轮播)https://github.com/leecade/react-native-swiper
react-native-image-zoom-viewer 图集查看(组件功能多,适合用于图集文章和大图查看)https://github.com/ascoders/react-native-image-viewer
均是第三方组件,安装方法一样,都需要在文件顶部引入,如: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
相关文章推荐
- 小菜鸟的第一篇文章,在学习RN,就当是做笔记吧,iOS开发RN中添加第三方库react-native-image-picker
- react-native-swiper设定高度的方法(设置rn轮播图所占高度)
- React Native(十五)——RN中的分享功能
- RN-第三方-react-native-image-picker,选择图片上传
- IOS与React Native混编,将RN框架使用CocoaPods集成到原生项目中
- React Native(七)——react-native-elements
- RN 中的秒杀倒计时功能实现 (react_native_countdowntimer)
- React Native填坑之旅--重新认识RN
- react-native-image-picker在IOS上总是返回”Can’t find variable:response”的错误?
- 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)
- 《React-Native系列》28、 RN之AsyncStorage
- RN3_CSS学习(react native 学习)
- React-Native学习--轮播图第三方组件-react-native-swiper
- RN8_React-Native知识点1之-Navigator导航学习
- 将第三方组件react-native-swiper应用在欢迎界面中
- react native 之 react-native-image-picke的详细使用图解
- 基础篇章:React Native之 Image 的讲解
- RN(react native)入坑指南-09,单元学习小结
- 解决react-native-swiper在安卓上与TabNavigator共用时不显示内容问题
- ReactNativeiOS(三)开发零碎4 Image 2 Base64