Есть ли способ открыть изображение при нажатии в приложении React native-expo? - PullRequest
Новая
       37

Есть ли способ открыть изображение при нажатии в приложении React native-expo?

0 голосов
/ 03 августа 2020

Вот текущий код: Для рендеринга изображения: 

 <CachedImage
   source={{ uri: item.image }}
   style={withStyle.leftChildImage}
   onDownloaded={(uri: string) => DbHelper.newImage(uri, true)}
 />

Компонент кэшированного изображения: 

import React, { Component } from 'react';
import { Image, ImageBackground } from 'react-native';
import * as FileSystem from 'expo-file-system';
import * as Crypto from 'expo-crypto';

// https://www.npmjs.com/package/react-native-expo-cached-image
export default class CachedImage extends Component {
state = {
imgURI: '',
}
async componentDidMount() {
  const filesystemURI = await this.getImageFilesystemKey(this.props.source.uri);
  await this.loadImage(filesystemURI, this.props.source.uri);
}
async componentDidUpdate(prevProps) {
  if (this.props.source.uri === prevProps.source.uri) {
    return;
}
  const filesystemURI = await this.getImageFilesystemKey(this.props.source.uri);
  await this.loadImage(filesystemURI, this.props.source.uri);
}
async getImageFilesystemKey(remoteURI: string | null) {
  if (null == remoteURI) {
    return undefined;
  }
  const hashed = await Crypto.digestStringAsync(
    Crypto.CryptoDigestAlgorithm.SHA256,
    remoteURI
  );
  return `${FileSystem.cacheDirectory}${hashed}`;
}
async loadImage(filesystemURI: string | undefined, remoteURI: string) {
  if (!filesystemURI) {
    return;
  }
  try {
    const metadata = await FileSystem.getInfoAsync(filesystemURI);
    if (metadata.exists) {
      this.setState({
        imgURI: filesystemURI
      });
      return;
    }
    const imageObject = await FileSystem.downloadAsync(
      remoteURI,
      filesystemURI
    );
    this.setState({
      imgURI: imageObject.uri
    });
    this.props.onDownloaded(imageObject.uri);
  } catch (err) {
    // console.log('Image loading error:', err);
    this.setState({imgURI: remoteURI});
  }
}
render() {
  var placeholder = require('../assets/images/icon.png');
  if (this.props.isBackground) {
    return (
      <ImageBackground
        {...this.props}
        source={this.state.imgURI ? {uri: this.state.imgURI} : placeholder}
      >
        {this.props.children}
      </ImageBackground>);
  } else {
    return (
        <Image
          {...this.props}
          source={this.state.imgURI ? {uri: this.state.imgURI} : placeholder}
         />
    );
  }
}

}

Теперь визуализируется компонент кэшированного изображения , конечно, на другом экране внутри плоского списка. Что, если я хочу, чтобы пользователь мог открывать масштабируемое изображение на экране при нажатии на изображение? Примечание: поскольку изображение является частью карты, максимальные размеры уже установлены, и простое увеличение ширины и высоты при нажатии просто обрезает его, а не делает его большим.

...