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: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
      width: Dimensions.get(&#39;window&#39;).width,
      height: Dimensions.get(&#39;window&#39;).width,
     }}
    />
   </View>
  );
 }
}

主要参数说明

1. imageUrls 图片url地址的数组

2. enableImageZoom 是否允许缩放

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

4. loadingRender 加载loading

5. renderHeader 头部样式

6. renderFooter 底部样式

7. renderIndicator 页码指示器样式

相关推荐：

基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解_javascript技巧

以上是React Native如何实现图片查看组件的详细内容。更多信息请关注PHP中文网其他相关文章！