React Native如何实现图片查看组件
程序员文章站
2022-03-12 09:08:50
...
React Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件。支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能。本文主要和大家介绍了React Native 图片查看组件的方法,希望能帮助到大家。
效果图
安装方法
npm i react-native-image-zoom-viewer --save
使用示例
const images = [ { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', }, { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', }, { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', }, ]; export default class Component06 extends Component { constructor(props) { super(props); } render() { return ( <View style={{ flex: 1 }}> <ImageViewer imageUrls={images} failImageSource={{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', width: Dimensions.get('window').width, height: Dimensions.get('window').width, }} /> </View> ); } }
主要参数说明
imageUrls 图片url地址的数组
enableImageZoom 是否允许缩放
failImageSource 加载失败时显示的图片
loadingRender 加载loading
renderHeader 头部样式
renderFooter 底部样式
renderIndicator 页码指示器样式
相关推荐:
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解_javascript技巧
以上就是React Native如何实现图片查看组件的详细内容,更多请关注其它相关文章!