< 返回技术文档列表

React Native图片查看组件的示例分析

发布时间:2021-09-01 02:40:01⊙投诉举报

这篇文章将为大家详细讲解有关React Native图片查看组件的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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>
  );
 }
}

主要参数说明

  1. imageUrls 图片url地址的数组

  2. enableImageZoom 是否允许缩放

  3. failImageSource 加载失败时显示的图片

  4. loadingRender 加载loading

  5. renderHeader 头部样式

  6. renderFooter 底部样式

  7. renderIndicator 页码指示器样式

关于“React Native图片查看组件的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


/template/Home/Zkeys/PC/Static