React Native 图片查看 React Native 图片查看组件的方法
ReactNative开发圈 人气:0想了解React Native 图片查看组件的方法的相关内容吗,ReactNative开发圈在本文为您仔细讲解React Native 图片查看的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:React,Native,图片查看,React,Native,图片查看组件,下面大家一起来学习吧。
React Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件。支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能。
效果图
安装方法
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 页码指示器样式
完整示例
完整代码:https://github.com/forrest23/ReactNativeComponents 本次示例代码在 Component06文件夹中。
加载全部内容