Composant de vue React Native

Cette fois, je vous présente le composant React Native view. Quelles sont les précautions pour le composant React Native view. Voici un cas pratique, jetons un oeil.

Cet article présente principalement la méthode du composant de visualisation d'images React Native. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour jeter un œil

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

InstallationMéthode

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 de fond renderFooter

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans ce article, et plus Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter l'actualisation de force arrière sur le côté Web de WeChat

Utilisez js pour obtenir rapidement l'adresse de l'image dans la page html

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!