首页 > 编程 > JavaScript > 正文

React Native 图片查看组件的方法

2019-11-19 14:15:46
字体:
来源:转载
供稿:网友

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表