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

主要参数说明

1. imageUrls 图片url地址的数组

2. enableImageZoom 是否允许缩放

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

4. loadingRender 加载loading

   

   多个微信小程序源码合集

   微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加

   0

   查看详情

5. renderHeader 头部样式

6. renderFooter 底部样式

7. renderIndicator 页码指示器样式

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue与vue-i18n结合实现后台数据的多语言切换方法

JQuery选中select组件被选中的值方法

vue.js中$set与数组更新方法_vue.js

以上就是使用React中的Native实现图片查看组件的详细内容，更多请关注php中文网其它相关文章！