脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Native 图片查看

React Native 图片查看组件的方法

 更新时间：2018年03月01日 13:49:51   作者：ReactNative开发圈  
这篇文章主要介绍了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
  5. renderHeader 头部样式
  6. renderFooter 底部样式
  7. renderIndicator 页码指示器样式

完整示例

完整代码：https://github.com/forrest23/ReactNativeComponents 本次示例代码在 Component06文件夹中。

组件地址：https://github.com/ascoders/react-native-image-viewer

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • ES6下React组件的写法示例代码

    ES6下React组件的写法示例代码

    这篇文章主要给大家介绍了在ES6下React组件的写法，其中包括定义React组件、声明prop类型与默认prop、设置初始state、自动绑定，文中分别给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • React Hook实现对话框组件

    React Hook实现对话框组件

    这篇文章主要为大家详细介绍了React Hook实现对话框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • React Server Component混合式渲染问题详解

    React Server Component混合式渲染问题详解

    React 官方对 Server Comopnent 是这样介绍的: zero-bundle-size React Server Components，这篇文章主要介绍了React Server Component: 混合式渲染,需要的朋友可以参考下
    2022-12-12
  • React setState是异步还是同步原理解析

    React setState是异步还是同步原理解析

    这篇文章主要为大家介绍了React setState是异步还是同步原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • React表中显示JSON数据demo

    React表中显示JSON数据demo

    这篇文章主要为大家介绍了React表中显示JSON数据demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • react中useEffect Hook作用小结

    react中useEffect Hook作用小结

    React中useEffect是一个非常重要的Hook,它允许我们函数组件中执行副作用操作,本文就来介绍一下useEffect Hook作用,具有一定的参考价值,感兴趣的可以了解一下
    2024-11-11
  • React中props验证不足的问题及解决方案

    React中props验证不足的问题及解决方案

    在 React 开发中,props 是组件间通信的重要方式,通过 props,父组件可以向子组件传递数据和回调函数,然而,如果对 props 的验证不足,可能会导致类型错误、运行时错误或难以调试的问题,本文将探讨 React 中 props 验证不足的常见问题,并提供解决方案
    2025-03-03
  • React使用react-sortable-hoc如何实现拖拽效果

    React使用react-sortable-hoc如何实现拖拽效果

    这篇文章主要介绍了React使用react-sortable-hoc如何实现拖拽效果问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • React通过redux-persist持久化数据存储的方法示例

    React通过redux-persist持久化数据存储的方法示例

    这篇文章主要介绍了React通过redux-persist持久化数据存储的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 利用React Router4实现的服务端直出渲染(SSR)

    利用React Router4实现的服务端直出渲染(SSR)

    这篇文章主要介绍了利用React Router4实现的服务端直出渲染(SSR)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论