The seventh day of the New Year, the construction of good luck!

In daily projects, it is common to encounter images that need to be previewed and enlarged, which involves finger zooming in and out of images and switching between multiple images for preview. The react-Native library is recommended to use the react-Native image-viewer.

Install yarn Add react-native-image-zoom-viewer. The current version is 3.0.1.

The component used is the ImageViewer, which is very easy to use. Generally, our projects click on the image and then pop up to preview the image, so we need to use modal popup to cover it, and rn’s modal is enough.

<Modal transparent={true} visible={this.state.showModal}> <ImageViewer ... // Other attributes /> </Modal>Copy the code

You can control the showModal variable by clicking on the event to hide the modal display.

Normally our image preview will be a set of images in rotation, so an array of images. Configure the image source through imageUrls, the most basic use method. Because Modal visible={true}, it is directly the preview picture displayed. In order to demonstrate the convenience of use, the actual project will still control the display and hiding according to variables.

const urls = [ {url:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b184ed1120694b82b726d2a735076f11~tplv-k3u1fbpfcp-watermark.image '}, {url:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b184ed1120694b82b726d2a735076f11~tplv-k3u1fbpfcp-watermark.image '} ] return <Modal transparent={true} visible={true}> <ImageViewer imageUrls={urls}/> </Modal>Copy the code

At this point, it already has the function to switch the preview.

The default is to start from the first image, you can configure the property index to control the first image display, usually a group of multiple images, we click on the middle of the third image, index to display the current click image.

EnableImageZoom: specifies whether to enable zooming. Zooming is supported by default.

The image preview comes out, then needs to click on the image, retracts the preview, provides the click callback of onClick, listens for the click event to close the popover.

<ImageViewer
    imageUrls={urls}
    onClick={() => {
        this.setState({
            showModal: false
        })
    }}
    />
Copy the code

By default, it also supports the pop-up menu function of holding down the call to save the image, but it is English prompt word, through the attribute menuContext={{“saveToLocal”: “save the image “, “cancel”: “cancel”}}, customize the text. The default is just to provide a popup window click callback function, the actual function of saving pictures or to write their own code, onSave pictures to save local callback method needs to be improved, involving storage permissions.

Of course, you can also define the long press exhale pop-up window, through menus to complete the picture saving function.

The above are the most basic and frequently used functions in daily projects. The GitHub address is provided with the React-native image-viewer, which also has many attribute configurations for reference, as well as various callback events. There is no enumeration here, but you can refer to them in the documentation.

Finally, 2021, the start of construction, also hope that all code farmers friends, continue to refueling, the Year of the Ox niubi!!