首页 > web前端 > js教程 > 正文

React Native查看组件

php中世界最好的语言
发布: 2018-03-17 13:11:22
原创
1162 人浏览过

这次给大家带来React Native查看组件,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: &#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 页码指示器样式

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样实现微信web端后退强制刷新

用js快速的获取html页面中图片的地址


以上是React Native查看组件的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!