This article was originally published on our official account: ReactNative development circle.

A New Year, a new beginning, I wish you all want want want year!

React Native image-viewer is a compact and fast icon viewer. Support picture zoom in and out, support picture loading failure to set the alternative picture, support to save the picture to the local and other functions.

rendering

Installation method

npm i react-native-image-zoom-viewer --save

Use the sample

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> ); }}Copy the code

Main Parameters

  • ImageUrls An array of image URL addresses
  • EnableImageZoom Whether zoom is allowed
  • FailImageSource Image displayed when loading fails
  • LoadingRender load loading
  • RenderHeader header style
  • RenderFooter bottom style
  • RenderIndicator Page indicator style

Complete sample

Full code: github.com/forrest23/R… The sample code for this time is in the Component06 folder. Please don’t skimp on your Star!

Component address

Github.com/ascoders/re…

Wechat does not allow you to jump to GitHub, you can click to view the original text to view the GitHub content.

Follow my wechat public number: ReactNative development circle