Implémenter le composant de visualisation d'images à l'aide de Native dans React

Cet article présente principalement la méthode du composant de visualisation d'images React Native. Maintenant, je le partage avec vous et le donne comme référence.

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.

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. imageUrls Tableau d'adresses URL d'images

2. enableImageZoom S'il faut autoriser le zoom

3. failImageSource Affiché lorsque le chargement échoue Image

4. loadingRender chargement chargement

5. style de tête renderHeader

6. style de fond renderFooter

7. Style d'indicateur de numéro de page renderIndicator

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Vue et vue-i18n sont combinés pour implémenter une méthode de commutation multilingue pour les données d'arrière-plan

Composant de sélection JQuery est sélectionné Méthode de valeur

$set et méthode de mise à jour du tableau dans vue.js_vue.js

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!