Comment implémenter le composant de visualisation d'images dans React Native

Composant de visualisation d'images React Native : react-native-image-viewer, composant JS pur, composant de visualisation d'icônes petites et rapides. Prend en charge le zoom avant et arrière des images, prend en charge la définition d'images de remplacement si les images ne parviennent pas à se charger, prend en charge l'enregistrement des images localement et d'autres fonctions. Cet article vous présente principalement la méthode du composant de visualisation d'images React Native, j'espère qu'il pourra vous aider.

Rendu

Méthode d'installation

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

Exemple d'utilisation

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

Description du paramètre principal

1. tableau imageUrls d'adresses URL d'image

2. enableImageZoom S'il faut autoriser le zoom

3. failImageSource L'image affichée lors de l'échec du chargement

4. loadingRender chargement chargement

5. style d'en-tête renderHeader

6. style d'en-tête renderHeader

7. style de fond de renderFooter

style d'indicateur de page renderIndicator

Recommandations associées :

Explication détaillée d'ImageView.js, un grand composant de visualisation d'images imitant l'espace QQ mobile basé sur les compétences zepto.js_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!