Implémenter le composant de visualisation d'images à l'aide de Native dans React-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-02 11:11:50

original

2160 Les gens l'ont consulté

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

Copier après la connexion

Exemple d'utilisation

const images = [
 {
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
 },
 {
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
 },
 {
  url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
 },
];

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

Copier après la connexion

Description du paramètre principal