React Native查看组件-js教程-PHP中文网

React Native查看组件

php中世界最好的语言

发布： 2018-03-17 13:11:22

原创

1414人浏览过

这次给大家带来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: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').width,
     }}
    />
   </View>
  );
 }
}

登录后复制

主要参数说明

imageUrls 图片url地址的数组
enableImageZoom 是否允许缩放
failImageSource 加载失败时显示的图片
loadingRender 加载loading
renderHeader 头部样式
renderFooter 底部样式
renderIndicator 页码指示器样式

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

推荐阅读：

WTS工作跟进系统 v1.16源码

WTS工作跟进系统的主要功能及特色： 1、符合通用标准的任务跟踪功能。可广泛用于重点工作跟进，督查任务跟进、工作督办、会议纪要决议跟进、领导交办工作跟进、团队协作任务跟进、日工作计划、周工作计划、月度工作计划跟进、项目进度管理软件与跟踪软件，提升团队执行力。 2、工作便签、自定义群组功能、工作授权、工作交接、下级工作任务查看。 3、绩效考核功能：系统提供KPI考核和目标管理考核（MBO），可