Home > Web Front-end > JS Tutorial > Implement image viewing component using Native in React

Implement image viewing component using Native in React

亚连
Release: 2018-06-02 11:11:50
Original
2253 people have browsed it

This article mainly introduces the method of viewing the React Native image component. Now I will share it with you and give you a reference.

React Native image viewing component: react-native-image-viewer, pure JS component, small and fast icon viewing component. Supports zooming in and out of images, setting replacement images if images fail to load, and saving images locally.

Rendering

Installation method

npm i react-native-image-zoom-viewer --save
Copy after login

Usage example

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: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
      width: Dimensions.get(&#39;window&#39;).width,
      height: Dimensions.get(&#39;window&#39;).width,
     }}
    />
   </View>
  );
 }
}
Copy after login

Main parameter description

  1. imageUrls Array of image url addresses

  2. enableImageZoom Whether to allow zooming

  3. failImageSource Image displayed when loading fails

  4. loadingRender loading

  5. renderHeader header style

  6. renderFooter bottom style

  7. renderIndicator Page number indicator style

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue and vue-i18n are combined to realize the multi-language switching method of background data

JQuery selects the select component to be selected Value method

$set and array update method in vue.js_vue.js

The above is the detailed content of Implement image viewing component using Native in React. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template