How to implement picture viewing component in React Native

React Native image viewing component: react-native-image-viewer, pure JS component, small and fast icon viewing component. Supports image zooming in and out, supports setting replacement images if images fail to load, supports saving images locally, and other functions. This article mainly introduces you to the method of React Native image viewing component, I hope it can help you.

Rendering

Installation method

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

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>
  );
 }
}

Main parameter description

1. imageUrls array of image url addresses

2. enableImageZoom Whether to allow zooming

3. failImageSource The image displayed when loading fails

4. loadingRender loading loading

5. renderHeader Header style

6. renderFooter bottom style

7. renderIndicator page indicator style

Related recommendations:

Based on zepto.js to implement the large image viewing component of imitation mobile QQ space ImageView.js detailed explanation_javascript skills

The above is the detailed content of How to implement picture viewing component in React Native. For more information, please follow other related articles on the PHP Chinese website!