陈桥驿站 陈桥驿站

ReactNative ImageViewer 模仿微信图片点击查看、手势放大

--> React Native 阅读 ( 63 ) 文章转载请注明来源!

前言

React Native实现仿微信的图片点击查看,手势放大等功能。

使用

npm install react-native-image-zoom-viewer

npm install react-native-image-zoom-viewer
npm WARN eslint-plugin-react-native@3.8.1 requires a peer of eslint@^3.17.0 || ^4 || ^5 || ^6 but none is installed. You must install peer dependencies yourself.
npm WARN react-native-gesture-handler@1.3.0 requires a peer of react@>= 16.3.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-native-gesture-handler@1.3.0 requires a peer of react-native@>= 0.58.2 but none is installed. You must install peer dependencies yourself.

+ react-native-image-zoom-viewer@3.0.0
added 2 packages from 1 contributor and audited 2054 packages in 22.75s
found 11 vulnerabilities (8 low, 3 high)
  run `npm audit fix` to fix them, or `npm audit` for details

ImageViewer

componentDidMount() {
  for(let i=0;i<parseInt(this.state.data.images);i++) {
    let url = 'http://localhost:8080/AppInterface/upload/' + this.state.data.id + '_' + i + '.jpg';
    this.state.images.push({
      url: url,
      props: { }
    })
    this.state.imageViews.push(<TouchableOpacity style={{marginLeft: 8, marginRight: 8, marginTop: 4, marginBottom: 4, borderRadius: 8}} key={i}
      onPress={() => {
        let t = this.state.images[0];
        this.state.images[0] = this.state.images[i];
        this.state.images[i] = t;
        this.setState({
          images: this.state.images,
          isShowModal: true
        })
      }}
      >
      <AutoHeightImage source={{uri: url}} style={{borderRadius: 8}} width={Tools.getScreenSize().get('width')-16}/>
    </TouchableOpacity>);
  }
  this.setState({
    images: this.state.images,
    imageViews: this.state.imageViews
  })
}
<Modal visible={this.state.isShowModal}>
  <ImageViewer imageUrls={this.state.images}
    onClick={() => {
      this.setState({
        isShowModal: false
      })
    }}
    saveToLocalByLongPress={false}
    />
</Modal>

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:http://www.cctv3.net/archives/rnImageViewer.html (转载时请注明本文出处及文章链接)

React Native
发表新评论
数据库查询到 2 条评论
  1. XXL
    XXL Windows 7Google Chrome 78.0.3904.108
    回复

    这个得给满分啊

    1. 陈桥驿站
      陈桥驿站全国花式编程总冠军 MacBook ProGoogle Chrome 81.0.4044.138
      回复

      @XXL 不是应该给我留一分害怕我骄傲吗?

雷姆
拉姆